vuex持久化方案探究

vue.jpeg

背景

用vue开发中大型应用时候，我们通常都会使用vuex进行状态管理，但由于vuex是将数据以js对象的形势维护在内存中，所以当页面刷新时候，存在内存中的vuex数据将会丢失，在很多场景中，我们不愿意看到这样的结果的

引出的问题

那么如何实现vuex的持久化，使得他能变得像localStorage，sessionStorag一样呢？

自己造轮子

大体的思路无非就是将vuex的state存起来，初始化的时候去读取缓存并注册vuex，具体可看下面两种方案：

方案1：编写vuex插件

vuex提供了插件的功能，我们可以在每次mutation的时候将state保存下来，存到localStorage，sessionStorage中，然后页面初始化的时候，读取存储的state值，覆盖state的初始值

方案2：利用beforeunload事件

beforeunload事件可能大家用的不是特别多，他并不是一个新特性，而是一个很老的事件，并且兼容性特别好（IE6都兼容了，你敢信）

WechatIMG112.jpeg

beforeunload事件会在页面卸载之前执。如刷新，返回到其他页面，关闭等操作都会触发这个事件

这就给我们提供另外一种缓存思路，与其每次mutation时记录变化，为何不在页面unload时，一次性把要缓存的state都缓存起来呢，这样效率不是更高吗？

基于这个原理，我开发了一款插件vue-vuex-persist

第三方解决方案

大多数第三方插件基于vuex插件实现。

社区也有一些不错的插件，如vuex-persistedstate