【全栈开发实战小草看书之Web端（四）Vuex状态管理】

全栈开发实战小草看书之Web端（四）Vuex状态管理

代码文件（store/index.js）

import { createStore } from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = createStore({
  state: {
    collapse: false,
    pages: [
      {
        path: "/",
        title: "首页",
      },
    ],
    resources: [],
    user: {},
  },
  mutations: {
    // Collapse
    toggleCollapse: (state) => {
      state.collapse = !state.collapse;
    },
    // Page
    clearPages: (state) => {
      state.pages = [
        {
          path: "/",
          title: "首页",
        },
      ];
    },
    removePage: (state, path) => {
      const index = state.pages.findIndex((i) => {
        return i.path == path;
      });
      state.pages.splice(index, 1);
    },
    savePage: (state, page) => {
      const exist = state.pages.some((i) => {
        return i.path == page.path;
      });
      if (!exist) {
        state.pages.push(page);
      }
    },
    // Resource
    clearResources: (state) => {
      state.resources = [];
    },
    saveResources: (state, resources) => {
      state.resources = resources;
    },
    // User
    clearUser: (state) => {
      state.user = {};
    },
    saveUser: (state, user) => {
      state.user = user;
    },
  },
  plugins: [
    createPersistedState({
      storage: window.sessionStorage,
    }),
  ],
});

export default store;

上一章 【全栈开发实战小草看书之Web端（三）配置文件】
下一章 【全栈开发实战小草看书之Web端（五）Axios封装】