Vuex拆分

目錄結構:

app.js

export default {
    // 命名
    namespaced: true,
    // state 儲存的狀态
    state: {
        slider: {
            opened: JSON.parse(sessionStorage.getItem("opened")),
        },
        token: sessionStorage.getItem("token") || "",
        menuList: null,
        permissionList: [],
        uname: sessionStorage.getItem("uname") || "",
    },
    // mutations去改變store中state的狀态。隻能處理同步函數
    mutations: {
        TOGGLE_SLIDER(state) {
            state.slider.opened = !state.slider.opened;
            sessionStorage.setItem(
                "opened",
                JSON.stringify(state.slider.opened)
            );
        },
        SET_TOKEN(state, token) {
            state.token = token;
            sessionStorage.setItem("token", state.token);
        },
        SET_UNAME(state, uname) {
            state.uname = uname;
            sessionStorage.setItem("uname", state.uname);
        },
        SET_MENU_LIST(state, menuList) {
            state.menuList = menuList;
        },
        SET_PERMISSION_LIST(state, permissionList) {
            state.permissionList = permissionList;
        },
    },
    // action 可以包含任意異步操作。ajax、setTimeout、setInterval不在話下
    actions: {
        toggle_slider({
            commit
        }) {
            commit("TOGGLE_SLIDER");
        },
        set_token({
            commit
        }, token) {
            commit("SET_TOKEN", token);
        },
        set_uname({
            commit
        }, uname) {
            commit("SET_UNAME", uname);
        },
        set_menu_list({
            commit
        }, menuList) {
            commit("SET_MENU_LIST", menuList);
        },
        set_permission_List({
            commit
        }, menuList) {
            let allMenus = XE.filterTree(menuList, (item) => item.type == 1);
            let permissionList = [];
            allMenus.forEach((item) => {
                if (item.children && item.children.length > 0) {
                    item.children.forEach((menu) => {
                        permissionList.push(
                            `${item.url}/${item.id}/${menu.menu}`
                        );
                    });
                }
            });
            commit("SET_PERMISSION_LIST", permissionList);
        },
    },
};
           

getters.js

export default {
    opened: (state) => state.app.slider.opened,
    token: (state) => state.app.token,
    uname: (state) => state.app.uname,
    menuList: (state) => state.app.menuList,
    permissionList: (state) => state.app.permissionList,
};

           

index.js

// 建立一個空對象
let modules = {};
// （建立出）一個 files，其中檔案來自 modules 目錄，request 以 `js` 結尾的檔案。
// const files = require.context("./modules", false, /\.js$/);
const files = require.context("@/store/modules", false, /\.js$/);
console.log(files,'files')
// 循環files.keys ,指派 modules 對象
files.keys().forEach((key) => {
    const fileName = key.replace(/(\.\/|\.js)/g, "");
    modules[fileName] = files(key).default;
});
import { createStore } from "vuex";

import getters from "./getters";
console.log(getters)
export default createStore({
    getters,
    modules,
});