vue-pc后台管理系统：vuex-persistedstate和菜单状态保持(三)

vuex是在中大型项目中必不可少的状态管理组件，刷新会重新更新状态，但是有时候我们并不希望如此。例如全局相关的，如登录状态、token、以及一些不常更新的状态等，

yarn add vuex-persistedstate --save

store.js

import Vue from "vue";
import Vuex from "vuex";
import persistedstate from "vuex-persistedstate";
Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {},
  plugins: [persistedstate()],
});

当前项目需要全局状态管理的有3个：选中的tabs数组editableTabs，tabs栏绑定的activeTab，左侧菜单绑定activeTab，页眉currentRouterName

currentRouter变量弃之不用，因为发现和activeTab作用，值都一样

store使用了模块化开发

1.目录结构

2.index.js

3.tabsRoute

const module = {
  namespaced: true,
  state: {
    //当前路由名字
    currentRouterName: "",
    //绑定值，选中选项卡的 name
    activeTab: "",
    //选择的标签页
    editableTabs: [],
  },
  mutations: {
    currentRouterName(state, currentRouterName) {
      state.currentRouterName = currentRouterName;
    },
    activeTab(state, activeTab) {
      state.activeTab = activeTab;
    },
    editableTabs(state, editableTabs) {
      state.editableTabs = editableTabs;
    },
  },
  actions: {
    currentRouterName: (store, val) => {
      store.commit("currentRouterName", val);
    },
    activeTab: (store, val) => {
      store.commit("activeTab", val);
    },
    addEditableTabs: (store, val) => {
      let arr = store.state.editableTabs;
      arr.push(val);
      store.commit("editableTabs", arr);
    },
    deleteEditableTabs: (store, val) => {
      let arr = store.state.editableTabs.filter((item) => {
        if (item.route != val) {
          return item;
        }
      });
      store.commit("editableTabs", arr);
    },
  },
};

export default module;

这里简短的说一下我理解的vuex:state储存数据，mutations改变数据，actions触发mutations的方法，这里面可以进行异步操作

Home.vue

<script>
//使用了Vuex提供了辅助函数
import { mapState } from "vuex";
export default {
  name: "Home",
  data() {
    return {
      //是否折叠菜单
      isCollapse: false,
      //配置路由
      routeList: [
        {
          name: "导航一",
          url: "first",
          icon: "el-icon-location",
          children: [],
        },
        {
          name: "导航二",
          url: "second",
          icon: "el-icon-menu",
          children: [
            {
              name: "选项1",
              url: "one",
            },
            {
              name: "选项2",
              url: "two",
            },
            {
              name: "选项3",
              url: "three",
            },
          ],
        },
        {
          name: "导航三",
          url: "third",
          icon: "el-icon-setting",
          children: [],
        },
      ],
    };
  },
  computed: {
    closable() {
      if (this.editableTabs.length > 1) {
        return true;
      } else {
        return false;
      }
    },
    activeTab: {
    //element的要求，要不然会报错
      get() {
      //记得命名的store
        return this.$store.state.tabsRoute.activeTab;
      },
      set(val) {
        this.$store.dispatch("tabsRoute/activeTab", val);
      },
    },
    //获取state的值
    ...mapState("tabsRoute", ["currentRouterName", "editableTabs"]),
  },

  watch: {
    $route: {
      handler(to, from) {
        console.log(to, "totototo");
        console.log(from, "fromfrom");
        this.controlTabs(to);
      },
      immediate: true,
      deep: true,
    },
  },

  methods: {
    collapseChage() {
      this.isCollapse = !this.isCollapse;
    },
    handleClose(key, keyPath) {
      this.$refs.menus.open(keyPath);
    },
    //控制tab标签
    controlTabs(route) {
      let flag = false;
      //修改currentRouterName的值
      this.$store.dispatch("tabsRoute/currentRouterName", route.meta.title);
      for (let item of this.editableTabs) {
        if (item.route === route.path) {
        //修改activeTab的值
          this.$store.dispatch("tabsRoute/activeTab", route.path);
          flag = true;
          break;
        }
      }
      if (!flag) {
        let names = route.meta.title;
        if (names.indexOf("/", 1) != -1) {
          // 二级或多级路由时
          names = names.substring(names.indexOf("/") + 1);
        }
        let param = {
          route: route.path,
          name: names,
        };
		//修改editableTabs的值
        this.$store.dispatch("tabsRoute/addEditableTabs", param);
        //修改activeTab的值
        this.$store.dispatch("tabsRoute/activeTab", route.path);
      }
    },
    //点击tab标签
    tabClick() {
      this.$router.push({ path: this.activeTab });
    },
    //移除tab标签
    tabRemove(targetName) {
      if (this.activeTab === targetName) {
        this.editableTabs.forEach((tab, index) => {
          if (tab.route === targetName) {
            let nextTab =
              this.editableTabs[index + 1] || this.editableTabs[index - 1];
            if (nextTab) {
              this.editableTabs.splice(index, 1);
            }
          }
        });
      }
      //修改editableTabs的值
      this.$store.dispatch("tabsRoute/deleteEditableTabs", targetName);
    },
  },
};
</script>

通过vuex-persistedstate，就可以实现刷新状态还依然存在