Vuex刷新页面数据丢失问题

vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被清空。

保存到浏览器缓存

适用于保留一些登录信息
监听页面是否刷新，如果页面刷新了，将state对象存入到缓存中。页面打开之后，判断缓存中是否存在数据，如果存在，则说明页面是被刷新过的，将缓存中存的数据取出来给vuex中的state赋值。

  created() {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem('store')) {
   this.$store.replaceState(
   Object.assign({}, 
   this.$store.state, 
   JSON.parse(sessionStorage.getItem('store'))));
    }

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state));
    });
  }

vuex-persistedstate插件

直接将状态存入了缓存中，默认使用localStorage来固化数据

//安装
npm i -S vuex-persistedstate

//在vuex初始化时候，作为组件引入
//src/store/index.js
import createPersistedstate from 'vuex-persistedstate'
import user from './modules/user'
import homefrom './modules/home'
export default new Vuex.Store({
  plugins: [
   createPersistedstate({
      storage:window.sessionStorage,//更改默认存储
      paths: ['user'，'home'] //存储指定模块，
      reducer(val) {
      //val 是由state里面所有的sate,不加reducer为全部
       return {
     // 只储存state中的assessmentData
       assessmentData: val.assessmentData
    }
}
   })
  ]
})

vuex-persist 插件

//安装
npm install --save vuex-persist
//src/store/index.js
import VuexPersistence from 'vuex-persist'
const vuexLocal = new VuexPersistence({
  storage: window.localStorage
})
const store = new Vuex.Store({
  plugins: [vuexLocal.plugin]
}) 

属性	类型	描述
key	string	将状态存储在存储中的键。默认: ‘vuex’
storage	存储方式	localStorage（默认）, sessionStorage, localforage
reducer	function (state) => object	过滤要持久化的值。默认保存整个状态。
modules	string[]	要持久化的模块列表。