目录结构:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnLzIDNlJTYkR2MwQDZ4QjMiFDN3QTMzQmNyMGM3U2N0EzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
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,
});