Vuex持久化插件(vuex-persistedstate)-解决刷新数据消失的问题

vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，但是有时候我们并不希望如此。例如全局相关的，如登录状态、token、以及一些不常更新的状态等，。怎么解决呢，我们可以结合本地存储做到数据持久化，也可以通过插件-vuex-persistedstate。

安装起步

引入及配置

在store下的index.js中

import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    // ...
    plugins: [persistedState()]
})

默认存储到localStorage
如果使用了modules默认存储所有modules

想要存储到sessionStorage，并自定义存储，例子配置如下

import createPersistedState from 'vuex-persistedstate';

const createPersisted = createPersistedState({
  storage: window.sessionStorage,
  key: "myVuex",
  reducer(val) {
    return {
      // 只储存state中的某些字段 注意：键值对名字要一致
      user: val.user,
      person: val.person
    }
  }
})
const createPersisted2 = createPersistedState({
  storage: window.localStorage,
  key: "myVuex2",
  reducer(val) {
    return {
      // 只储存state中的某些字段 注意：键值对名字要一致
      tagsView: val.tagsView,
    }
  }
})
const store: Store<any> = new Vuex.Store({
  // ...
  plugins: [createPersisted, createPersisted2]
});
export default store;