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
网友评论