vuex 状态 缓存

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