接触Vuex也有一段时间，之前也遇到过刷新之后Vuex丢失的问题。
因为Vuex也是js,存在于内存中，刷新浏览器的话会导致js重新加载，Vuex的Store全部重置, 所以为了防止这类情况的发生的话，一般来说我们会用localStorage对vuex进行一个存储，防止Vuex丢失的情况。
但是这样的话，我们就会面临一个问题，就是每次进行Store的状态变化时，都要手动存储下，很麻烦 所以不妨试试通过编写Vuex的插件来完成这个Vuex状态持久化的功能
首先
- 我们来看下Vuex的插件的写法
const myPlugin = store => {
// 当 store 初始化后调用
store.subscribe((mutation, state) => {
// 每次 mutation 之后调用
// mutation 的格式为 { type, payload }
})
}
其实挺简单的，就两个
- 第一个就是在Store初始化的时候可以进行函数调用
- 第二个就是在mutation之后可以进行函数调用
借用这两个，其实就可以实现一个简单的vuex状态持久化功能了，下面贴一下代码
const handleStore = store => {
if (localStorage.store) store.replaceState(JSON.parse(localStorage.store)) // 初始化store
store.subscribe((mutation, state) => {
localStorage.setItem("store", JSON.stringify(state))
})
}
// 然后在new Vuex的时候进行调用
const store = new Vuex.Store({
state,
mutations,
plugins: [handleStore]
})
当然这个是最简单的版本，还可以加一些白名单，时间戳之类的，这样的话更加颗粒化，主要是提供一个思路
