vuex数据状态持久化

vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据持久化，也可以通过插件-vuex-persistedstate。

1通过 vuex-persistedstate这个插件，来实现将数据存储到本地

npm install vuex-persistedstate
1
之后使用这个插件在Store中

import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
modules: {    
    cart,   //以模块的方式导出，这是专属于购物车的，可以再有一个共享登陆状态的，这样便于分类
  },
  plugins: [createPersistedState()]  //加上这个就可以了
})

插件的原理其实也是结合了存储方式,只是统一的配置就不需要手动每次都写存储方法
默认存储到localStorage

想要存储到sessionStorage，配置如下

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage
  })]
})

想使用cookie同理
默认持久化所有state

指定需要持久化的state,配置如下

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage,
      reducer(val) {
          return {
          // 只储存state中的assessmentData
          assessmentData: val.assessmentData
        }
     }
  })]

vuex引用多个插件的写法
譬如：vuex提示的插件和持久化的插件一起使用，配置如下

import createPersistedState from "vuex-persistedstate"
import createLogger from 'vuex/dist/logger'
// 判断环境 vuex提示生产环境中不使用
const debug = process.env.NODE_ENV !== 'production'
const createPersisted = createPersistedState({
  storage: window.sessionStorage
})
export default new Vuex.Store({
 // ...
  plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
})
//**注意：plugins要是一个一维数组不然会解析错误

2手动利用HTML5的本地存储

vuex的state在localStorage或sessionStorage或其它存储方式中取值
在mutations,定义的方法里对vuex的状态操作的同时对存储也做对应的操作。
这样state就会和存储一起存在并且与vuex同步

最直观的就是，手动写比较麻烦。

原文链接：https://blog.csdn.net/qq_30841657/article/details/97099274