vuex持久化方案探究

4,484 阅读1分钟

背景

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

引出的问题

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

自己造轮子

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

方案1:编写vuex插件

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

方案2:利用beforeunload事件

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

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

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

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

第三方解决方案

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

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