解决 vuex页面刷新后数据丢失

vuex

监听页面是否刷新，如果页面刷新了，将state对象存入到sessionStorage/localStorage中。
页面打开之后，判断sessionStorage/localStorage中是否存在state对象，如果存在，则说明页面是被刷新过的，将sessionStorage/localStorage中存的数据取出来给vuex中的state赋值。如果不存在，说明是第一次打开，则取vuex中定义的state初始值。

//全局监听，页面刷新的时候将store里state的值存到sessionStorage中，然后从sessionStorage中获取，再赋值给store。然后再把session里面存的删除即可，相当于中间件的作用。
 //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
      sessionStorage.removeItem("store")
    }

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

安装插件

vuex-persistedstate实现数据持久化，来解决使用vuex存储状态时页面刷新后数据消失的问题
vuex-persistedstate：在页面重新加载之间保持并重新补充Vuex状态

npm install --save vuex-persistedstate

在store中

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {},
    //方法属性
    mutations: {},
    //异步属性
    actions: {},
    //计算属性
    getters: {},
    modules: {},
    // 页面刷新时防止信息丢失 存储到localStorage
    
    // plugins: [createPersistedState()],
    // 存储到sessionStorage
    //plugins: [createPersistedState({
    //    storage: window.sessionStorage
    //})],
    
    plugins: [createPersistedState()]
})
export default store