vuex中mapGetters「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。

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)
}