使用vuex页面刷新后数据丢失了（vuex数据持久化）

vuex的状态储存是响应式的，当我们使用vuex进行全局状态管理时，vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会得到高效刷新，vuex存储的数据只是在页面中，相当于我们定义的全局变量，刷新之后，会发现之前获取的vuex状态的数据消失了，里面的数据就会恢复到初始化的状态。因为，刷新页面后，vuex会重新更新state

vuex存取值一般都是放在computed计算属性中，但是页面一刷新数据就没了。

computed: {
    insurDatalist() {
      return this.$store.getters.getinsureDatalist;
    },
    payData() {
      return this.$store.getters.getpayData;
    },
  },

方法一：

思路

监听页面是否刷新，如果页面刷新了，将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下的index.js中引入

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

import createPersistedState from "vuex-persistedstate";

export default new Vuex.Store({
    plugins: [createPersistedState()]
})

拜