1、代码 保存
在 app 页面编写
export default function(ctx){
// 离开页面
window.addEventListener('beforeunload', ()=> {
console.log('触发离开事件')
sessionStorage.setItem("store",JSON.stringify(ctx.store.state))
});
// 页面加载完成
window.addEventListener('load', ()=> {
console.log('触发加载完成事件')
let storeCache = sessionStorage.getItem("store")
if(storeCache != null&&storeCache != undefined&& storeCache!= ''){
// 普通的state属性高更改的话需要用mutations ,但是如果你修改的是state 根属性的时候,那么
// 就要使用replaceState 方法了。
ctx.store.replaceState(JSON.parse(storeCache));
}
});
}
2. 采用插件// vuex-persist
import Vuex from 'vuex'
import Vue from 'vue'
import VuexPersistence from 'vuex-persist'// vux 状态缓存插件
// vuex-persist
const vuexLocal = new VuexPersistence({
storage: window.localStorage
})
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
isLogin: false
},
mutations: {
changeLoginStatus (state, params) {
state.isLogin = params
}
},
actions: {
},
modules: {
},
plugins: [vuexLocal.plugin]
})
export default store