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

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

1.手动利用HTML5的本地存储

方法

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

问题

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

2.利用vuex-persistedstate插件

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

使用方法

安装

npm install vuex-persistedstate --save
复制代码

引入及配置

在store下的index.js中

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  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要是一个一维数组否则会解析错误