vuex为了更快捷解决组件之间相互传值问题 不划分模块 index.js: import Vue from 'vue'import Vuex from 'vuex'import router from '@/router'import { getToken, setToken, removeToken } from '@/common/utils/auth'import { getInfo, getDeptUserTreeList, initGetToken } from '@/api/user'Vue.use(Vuex)const store = new Vuex.Store({ state: { account: '', token: getToken(), taskTab: '', deviceTab: '', name: '', userId: '', roleName: '', dept: '', deptCode: '', permissions: [], roles: [], deptUsers: [] }, mutations: { SET_ACCCOUNT: (state, account) => { state.account = account }, SET_TOKEN: (state, token) => { state.token = token }, SET_DEVICE_TAB: (state, tabName) => { state.deviceTab = tabName; }, SET_USERID: (state, userId) => { state.userId = userId }, SET_NAME: (state, name) => { state.name = name }, SET_ROLES: (state, roles) => { state.roles = roles }, SET_roleName: (state, roleName) => { state.roleName = roleName }, SET_DEPT: (state, deptName) => { state.dept = deptName }, SET_DEPT_CODE: (state, deptCode) => { state.deptCode = deptCode }, SET_PERMISSIONS: (state, permissionList) => { state.permissions = permissionList }, SET_DEPT_USERS: (state, deptUsers) => { state.deptUsers = deptUsers }, // 消息中心 SET_TASK_TAB: (state, tasktabName) => { state.taskTab = tasktabName; }, }, actions: { // 获取token并设置 initGetToken({ commit }, account) { // setToken('') return new Promise((resolve, reject) => { initGetToken(account).then(res => { if (res && res.code !== 200) { reject('getToken failed, please get again') } commit('SET_TOKEN', res.data.token) setToken(res.data.token) // 获取token成功就可以进入菜单页进行操作 router.push({ name: 'menu' }) resolve(true) }).catch(error => { reject(error) }) }) }, setToken({ commit }, data) { return new Promise(resolve => { commit('SET_TOKEN', data) resolve() }) }, getInfo({ commit, state }) { return new Promise((resolve, reject) => { getInfo(state.token).then(response => { const { data } = response if (!data) { reject('Verification failed, please Login again.') } const { roleName, roleCode, userName, deptName, deptCode, permissionList, id } = data // roles must be a non-empty array if (!roleCode || roleCode.length <= 0) { reject('getInfo: roles must be a non-null array!') } commit('SET_USERID', id) commit('SET_ROLES', roleCode) commit('SET_NAME', userName) commit('SET_roleName', roleName) commit('SET_DEPT', deptName) commit('SET_DEPT_CODE', deptCode) commit('SET_PERMISSIONS', permissionList) resolve(data) }).catch(error => { reject(error) }) }) }, getDeptUser({ commit, state }) { return new Promise((resolve, reject) => { getDeptUserTreeList().then(res => { if (res.code !== 200) { reject('Verification failed, please Login again.') } commit('SET_DEPT_USERS', res.data) resolve(res.data) }).catch(error => { reject(error) }) }) }, }, getters: { token: state => state.token, username: state => state.name, userId: state => state.userId, dept: state => state.dept, deptCode: state => state.deptCode, permissions: state => state.permissions, roles: state => state.roles, deptUsers: state => state.deptUsers, account: state => state.account, roleName: state => state.roleName, }})export default store 在vue组件中
import { mapGetters } from "vuex"; computed: { ...mapGetters(["roles", "username", "userId", "roles"]), },mounted():{ console.log(roles)}