vuex中mapGetters「建议收藏」

vuex中mapGetters「建议收藏」vuex为了更快捷解决组件之间相互传值问题不划分模块结构目录index.js:importVuefrom’vue’importVuexfrom’vuex’importrouterfrom’@/router’import{getToken,setToken,removeToken}from’@/common/utils/auth’import{getInfo,getDeptUserTreeList,initGetToke…

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

vuex为了更快捷解决组件之间相互传值问题

   不划分模块

结构目录

vuex中mapGetters「建议收藏」

 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账号...

(0)
blank

相关推荐

  • 现货黄金贵金属投资入门基础知识

    现货黄金贵金属投资入门基础知识现货黄金贵金属投资入门知识:  很多中小投资者对证券投资都比较熟悉,但对现货黄金贵金属投资还不是很熟悉。现货吧给大家做一些简单的介绍。希望能为大家进入现货黄金贵金属投资的市场提供一些有益的参考和帮助。  现货黄金.jpg  黄金贵金属投资分为实物黄金和合约式黄金,投资实物黄金的可靠性较强,但买卖过程比较麻烦,而且还要自己承担保管的成本和风险,投资起来明显不如合约

  • 使用moment格式化日期

    使用moment格式化日期案例:本例是在react-native中格式化日期1,引入moment2,使用moment例如:letstartDate=moment(‘2018-09-27’).format(YYYY-MM-DD);moment使用详解:格式化日期当前时间:moment().format(‘YYYY-MM-DDHH:mm:ss’);//2014-09-2423:…

  • 学成在线源代码(学成网首页代码)

    首先同一目录下放置三个文件夹(imagesxxx.htmlstyle.css)图片:头部区域分四个模块:logo(图片)导航栏(无序列表)搜索(文本输入框、button按钮)用户(图片)<divclass=”headerw”><!–logo部分–><divclass=”logo”><!–alt显示未加载时,所提示的文字,title显示鼠标放上时,所提示的文件

  • 实现线程同步的几种方式总结

    实现线程同步的几种方式总结在多线程中线程的执行顺序是依靠哪个线程先获得到CUP的执行权谁就先执行,虽然说可以通过线程的优先权进行设置,但是他只是获取CUP执行权的概率高点,但是也不一定必须先执行。在这种情况下如何保证线程按照一定的顺序进行执行,今天就来一个大总结,分别介绍一下几种方式。通过Object的wait和notify 通过Condition的awiat和signal 通过一个阻塞队列 通过两个阻塞队列 …

  • Redhat的yum配置步骤

    Redhat的yum配置步骤Redhat的yum配置RedhatLinux是免费的操作系统,但是里面的yum服务是收费的,有的时候我们安装软件必须从yum上面安装。虽然Redhat的yum是收费的,但我们可以使用CentOS

  • 关于我妈的一切_bool flag=false

    关于我妈的一切_bool flag=falseFLAG_ACTIVITY_MULTIPLE_TASK总结:1、使用改标记,需要自行管理Activity2、需要与FLAG_ACTIVITY_NEW_DOCUMENT或者FLAG_ACTIVITY_NEW_TASK共同使用/***Thisflagisusedtocreateanewtaskandlaunchanactivityinto…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号