大家好,又见面了,我是你们的朋友全栈君。
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)
}
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/134699.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...