本文共 710 字,大约阅读时间需要 2 分钟。
用vue开发中大型应用时候,我们通常都会使用vuex进行状态管理,但由于vuex是将数据以js对象的形势维护在内存中,所以当页面刷新时候,存在内存中的vuex数据将会丢失,在很多场景中,我们不愿意看到这样的结果的
那么如何实现vuex的持久化,使得他能变得像localStorage,sessionStorag一样呢?
大体的思路无非就是将vuex的state存起来,初始化的时候去读取缓存并注册vuex,具体可看下面两种方案:
vuex提供了的功能,我们可以在每次mutation的时候将state保存下来,存到localStorage,sessionStorage中,然后页面初始化的时候,读取存储的state值,覆盖state的初始值
事件可能大家用的不是特别多,他并不是一个新特性,而是一个很老的事件,并且特别好(IE6都兼容了,你敢信)
beforeunload事件会在页面卸载之前执。如刷新,返回到其他页面,关闭等操作都会触发这个事件
这就给我们提供另外一种缓存思路,与其每次mutation时记录变化,为何不在页面unload时,一次性把要缓存的state都缓存起来呢,这样效率不是更高吗?
基于这个原理,我开发了一款插件
大多数第三方插件基于vuex插件实现。
社区也有一些不错的插件,如
作者:ggsxp 链接:https://juejin.im/post/5b71ad7ff265da283105dfe0 来源:掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。