解决 vue-element-admin Tags-view 标签刷新消失问题

Tags-view 中的数组是缓存在 vuex 里面的，然后一开始我司用的解决 vuex 刷新消失的插件是vue-along，但是使用了这个插件就会报错Cannot convert a Symbol value to a string，最后发现是因为这个插件会遍历传进来的 data，存在循环引用；然而 Tags-view 用的是合并对象方法是Object.assign，这个方法是浅复制，会影响原有的；

解决方案：

• 更换 vuex 持久化插件vuex-persistedstate

1. /src/store/index.js 代码如下

vuex-persistedstate 的reduce 函数下面的是需要持久化的，需要遍历，然后 Tags-view 的不用 vuex-persistedstate 缓存，就不会存在循环引用，也就是不会报错；具体的vuex-persistedstate用法在以下两篇教程都可找到；PS:也都是我写哒~

解决vuex刷新消失问题

vuex持久化+模块化实战用法(进阶篇)

import Vue from "vue";
import Vuex from "vuex";
import getters from "./getters";
// import createVuexAlong from 'vuex-along'
import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex);

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context("./modules", true, /\.js$/);

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
  const value = modulesFiles(modulePath);
  modules[moduleName] = value.default;
  return modules;
}, {});

const store = new Vuex.Store({
  plugins: [
    createPersistedState({
      storage: window.localStorage,
      reducer(val) {
        return {
          // 需要储存的数据
          user: val.user,
          settings: val.settings,
          permission: val.permission,
          app: val.app,
        };
      },
    }),
  ],
  modules,
  getters,
  // plugins: [createVuexAlong()]
});

export default store;

2. /src/layout/components/TagsView/index.vue 代码如下：

2.1 重点代码，就是我新加的代码

  mounted() {
     // 页面刷新前缓存和赋值
    this.beforeUnload();
    this.initTags()
    this.addTags()
  },
beforeUnload() {
      // 监听页面刷新
      window.addEventListener("beforeunload", () => {
        // visitedViews数据结构太复杂无法直接JSON.stringify处理，先转换需要的数据
        let tabViews = this.visitedViews.map(item => {
          return {
            fullPath: item.fullPath,
            hash: item.hash,
            meta: { ...item.meta },
            name: item.name,
            params: { ...item.params },
            path: item.path,
            query: { ...item.query },
            title: item.title
          };
        });
        sessionStorage.setItem("tabViews", JSON.stringify(tabViews));

      });
      // 页面初始化加载判断缓存中是否有数据
      let oldViews = JSON.parse(sessionStorage.getItem("tabViews")) || [];
      if (oldViews.length > 0) {
        this.$store.state.tagsView.visitedViews = oldViews;
        sessionStorage.clear();
      }
    },

2.1. 全部代码