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)


相关推荐

  • 数据库严格模式_mysql关系型数据库

    数据库严格模式_mysql关系型数据库设置严格模式为当前会话设置严格模式:执行SETsql_mode=’STRICT_TRANS_TABLES’或者SETsql_mode=’STRICT_ALL_TABLES’。全局设置严格模式:执行SETglobalsql_mode=’STRICT_TRANS_TABLES’或者SETglobalsql_mode=’STRICT_ALL_TABLES’。或者在MyS…

    2022年10月28日
  • 浅谈Vue响应式原理

    浅谈Vue响应式原理一、Vue中的响应式Vue最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的JavaScript对象。而当你修改它们时,视图会进行更新。二、响应式的基本原理1.通过Object.definePropert来实现监听数据的改变和读取(属性中的getter和setter方法)实现数据劫持2.观察者模式(发布者-订阅者)观察者(订阅者)–Watcher:update():当事件发生时,具体要做的事情目标(发布者)–Dep:①subs数组:存储所有的观察者②

  • 二、快速开始——Spring集成Mybatis-Plus

    二、快速开始——Spring集成Mybatis-Plus由于MyBatis-Plus是在MyBatis的基础上只做增强不做改变,因此其与Spring的整合非常简单。只需把MyBatis的依赖换成MyBatis的依赖,再把sqlSessionFactory换成MyBatis-Plus的即可。下面让我们在Spring中快速集成Mybatis-Plus的具体操作:1、准备测试表–创建库CREATEDATABASEmp;–使用库USEm…

  • Java学习之Mybatis框架入门篇

    Java学习之Mybatis框架入门篇0x00前言前面文章使用jdbc进行数据库的连接,虽然代码并不复杂,但是比较繁琐。在连接池的文章里面也使用到了JDBCTemplate简化了数据库操作的步

    2021年12月12日
  • css3 flex布局的使用 图片文字垂直居中排列 图文混排垂直居中 display:flex「建议收藏」

    css3 flex布局的使用 图片文字垂直居中排列 图文混排垂直居中 display:flex「建议收藏」遇到的问题在实际工作的过程中经常遇到图片文字的混排,需要图片与一段文字垂直居中,这个实现方法以前一直非常复杂,而flex是解决这个问题比较好的办法;css代码display:flex;flex的是Flexible的缩写,意为弹性。可以在单行或者多行的盒状模型中提供很好的灵活性,所以它也是自适应友好的。图文混排垂直居中基本用法用flex实现文字和图片在同一行的时候的垂…

  • 数据库导出表结构语句_sqlserver导出表结构

    数据库导出表结构语句_sqlserver导出表结构第一种:利用sql语句查询需要说明的是该方法应该适用很多工具,博主用的是navicatSELECTTABLE_NAME表名,COLUMN_NAME列名,COLUMN_TYPE数据类型,DATA_TYPE字段类型,CHARACTER_MAXIMUM_LENGTH长度,IS_NULLABLE是否为空…

发表回复

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

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