state
东西都存在state中
Mutation
更改state的唯一方式,store.commit('increment') 触发。相当于一个回调函数
•
不能有异步方法,也就是 then permission 那些
•
store.commit('status/SET_RELOGIN', false); 模块化之后在模块之外调用要加上模块名 import store from '@/store'
action
里面可以有异步方法。
使用
store.commit("permission/SET_MENUS", null);
this.$store.dispatch('user/login', this.loginForm).then();
this.$store.getters.lastPage;
vue/src/store/modules/permission.js
import {asyncRoutes, constantRoutes, resetRouter} from '@/router'
import {getMenu} from "@/api/menu";
import router from '../../router'
import Layout from "@/layout/index";
const state = {
perms: [],
menus: [],
};
export function makeTree(res, keys) {
let tree = [];
for (let resKey in res) {
if (res[resKey].pId === 0) {
findKey(resKey, res, keys);
tree.push(res[resKey]);
// res.splice(resKey, 1)
}
}
return tree;
}
const mutations = {
SET_MENUS: (state, menus) => {
state.menus = menus;
},
SET_PERMS: (state, perms) => {
state.perms = perms;
}
};
const actions = {
generateRoutes({commit}, roles) {
return new Promise(resolve => {
let accessedRoutes
if (roles.includes('admin')) {
accessedRoutes = asyncRoutes || []
} else {
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
}
commit('SET_ROUTES', accessedRoutes);
resolve(accessedRoutes)
})
},
conductMenuTree({commit}, menuList) {
//把权限列表分成 按钮权限 和 菜单.
let menus = [];
let perms = [];
for (let i = 0; i < menuList.length; i++) {
if (menuList[i].type === 1)
perms.push(menuList[i]);
else {
console.log(components[menuList[i].component]);
//todo:判断有没有组件
let comp = components[menuList[i].component];
if (comp) {
menuList[i].component = () => comp;
menus.push(menuList[i]);
} else {
console.log("找不到组件:" + menuList[i].component)
}
}
}
//存储所有的按钮权限
perms = resolvePerms(perms);
commit('SET_PERMS', perms);
//把menu list 合成成tree
let tree = makeTree(menus, {id: 'menuId', pId: 'pId'});
commit('SET_MENUS', tree);
console.log(perms);
console.log(tree.toString());
}
};
export default {
namespaced: true,
state,
mutations,
actions
}
vue/src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
const getters = {
sidebar: state => state.app.sidebar,
language: state => state.app.language,
size: state => state.app.size,
device: state => state.app.device,
visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews,
user: state => state.user.user,
menus: state => state.permission.menus,
perms: state => state.permission.perms,
errorLogs: state => state.errorLog.logs,
dicts: state => state.dicts,
reLogin: state => state.status.reLogin,
};
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({
modules,
getters
})
export default store
评论区