vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据状态持久化，也可以通过插件vuex-persistedstate。
1.手动利用HTML5的本地存储
方法
1、vuex的state在localStorage或sessionStorage中取值；
2、在mutations中,定义的方法里对vuex的状态操作的同时对存储也做对应的操作。
这样state就会和存储一起存在并且与vuex同步
2.利用vuex-persistedstate插件
插件的原理其实也是结合了存储方式,只是统一的配置就不需要手动每次都写存储方法。
使用方法
安装
npm install vuex-persistedstate --save
引入及配置：在store下的index.js中
import createPersistedState from "vuex-persistedstate"
conststore =newVuex.Store({
// ...
plugins: [createPersistedState()]
})
默认存储到localStorage
想要存储到sessionStorage，配置如下
import createPersistedState from "vuex-persistedstate"
conststore = newVuex.Store({
// ...
plugins: [createPersistedState({
storage:window.sessionStorage
})]
})
默认持久化所有state
指定需要持久化的state,配置如下
import createPersistedState from "vuex-persistedstate"
conststore = newVuex.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提示生产环境中不使用
constdebug = process.env.NODE_ENV !== 'production'
constcreatePersisted = createPersistedState({
storage:window.sessionStorage
})
exportdefaultnewVuex.Store({
// ...
plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
})
plugins要是一个一维数组不然会解析错误
作者：无脚鸟30
链接：https://www.jianshu.com/p/e88ab068820b
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。