关于vuex的持久化

接触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]
})

当然这个是最简单的版本，还可以加一些白名单，时间戳之类的，这样的话更加颗粒化，主要是提供一个思路

最后编辑于：2018.03.02 14:13:12

关于vuex的持久化

首先

推荐阅读更多精彩内容