vuex state 持久化的解决方案
vue项目在使用 vuex 时都会存在一个问题，那就是当浏览器刷新时会清除 vuex 缓存的 state 数据，而偶尔可能会碰到某种需求需要实现在刷新浏览器时不清除vuex缓存的数据，那么该如何实现呢？
store 目录介绍
方案一
利用本地存储；
这个时候我们就需要利用到浏览器的会话缓存 sessionStorage 来实现（当然你也可以考虑使用localStorage或者 cookies），具体实现代码如下：
- 在
App.vue中增加监听刷新事件：
export default {
name: "App",
mounted() {
window.addEventListener("unload", this.savaState);
},
methods: {
savaState() {
sessionStorage.setItem("tabList", JSON.stringify(this.$store.state.tabsView.tabList));
},
}
}
tabsView.js
/**
* 顶部页签栏
*/
const state = {
tabList: sessionStorage.getItem('tabList') ? JSON.parse(sessionStorage.getItem('tabList')) : [], // 页签数组
}
const getter = {
}
const mutations = {
}
const actions = {
}
export default {
namespaced: true, // 开启命名空间
state,
getter,
mutations,
actions,
}
方案二
利用插件vuex-persistedstate；
附上vuex-persistedstategithub地址，里面readme文件有详细的使用说明。
- 安装
npm install --save vuex-persistedstate
tabsView.js
/**
* 顶部页签栏
*/
const state = {
// tabList: sessionStorage.getItem('tabList') ? JSON.parse(sessionStorage.getItem('tabList')) : [], // 页签数组
tabList: [], // 页签数组
}
const getter = {
}
const mutations = {
}
const actions = {
}
export default {
namespaced: true, // 开启命名空间
state,
getter,
mutations,
actions,
}
store出口文件index.js
import Vue from "vue"
import Vuex from "vuex"
// 引入插件api
import createPersistedState from "vuex-persistedstate";
// 引入module js文件
import tabsView from "./modules/tabsView"
const tabListState = createPersistedState({
storage: window.sessionStorage, // 使用sessionStorage 进行state 持久化
paths: ['tabsView.tabList'] // 只对 tabsView module 文件中的 tabList state 持久化
// paths: ['tabsView'] // 对 tabsView module 文件中的整个 state 持久化
})
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
tabsView,
},
plugins: [tabListState]
})
export default store
总结
- 方案一：比较适合只对一个state 进行持久化，代码程度不复杂，简单，但是随之而来的就是书写的复杂度，在对state 命名赋值的时候都需要判断是从本地存储中取，还是直接赋值，代码不美观，不易于维护。
- 方案二：相比方案一，依赖插件，代码美观，统一的都在store的出口文件index.js中进行维护，具有一定的优势，特别是如果需要对多个state 进行持久化的化，方案二无疑是最佳选择。
综上，大家可以各自根据需求使用方案一或者方案二。
如有不足，望大家多多指点！ 谢谢！