Vuex刷新后数据失效

1.问题描述

一般在登录成功的时候需要把用户信息，菜单信息放置vuex中，作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被清空。

2.解决思路

1. 将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）
2. 使用vuex-persistedstate插件，其原理就是将vuex的state存在localStorage或sessionStorage或cookie中一份，刷新页面的一瞬间，vuex数据消失，vuex会去sessionStorage中拿回数据，变相的实现了数据刷新不丢失

3.使用方法

安装：npm install vuex-persistedstate --save

在所在的vuex的index.js文件进行如下配置，需要设置好默认以及各种跳转修改默认值

import createPersistedState from "vuex-persistedstate";//引入插件
export default new Vuex.Store({
  //...在最后添加插件
  plugins: [
    createPersistedState({
      storage: window.sessionStorage,//选择存放的位置
      reducer(data) {
        return {
          // 设置需要缓存的数据
          menu: data.menu,
          //...
        };
      },
    }),
  ],
});

4.参考来源

https://blog.csdn.net/qq_36812154/article/details/122313863