vuex持久化方案探究

背景

用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