eladmin框架vuex的修改

vueX的相关知识

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，核心就是 store（仓库），仓库是用来储存东西的。

五大属性

state: 数据
actions:可以包含异步操作
mutations: 唯一可以修改state数据的场所
getters: 类似于vue组件中的计算属性，对state数据进行计算（会被缓存）
modules:模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter

项目需求

eladmin框架，根据登录返回的数据调用接口，再根据返回的数据，用户state.user中增加一下teacherId员工的iid

实例代码

1.登录校验成功后：调用this.$store.dispatch(‘Login’, user)

在这里插入图片描述

2.actions 的Login中在获取了userId后调用自定义的getTeacherId，获取到员工Id，写入state.user中

3.mutations加入SET_TEACHERID

SET_TEACHERID(state, payload) {
  state.user.teacherId = payload
}

4. user变量外加方法getTeacherId

export const getTeacherId=(id,commit)=>{
  queryByUserId({userId:id}).then(res => {
    let result=res ? res : null
    commit('SET_TEACHERID', result)
  })
}

完整代码/src/store/modules/user.js

import { login, getInfo, logout } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { queryByUserId } from '@/api/teacherManage/teacherManagement'

const user = {
  state: {
    token: getToken(),
    user: {},
    roles: [],
    // 第一次加载菜单时用到
    loadMenus: false
  },

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    SET_USER: (state, user) => {
      state.user = user
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles
    },
    SET_LOAD_MENUS: (state, loadMenus) => {
      state.loadMenus = loadMenus
    },
    SET_TEACHERID(state, payload) {
      state.user.teacherId = payload
    }
  },

  actions: {
    // 登录
    Login({ commit }, userInfo) {
      const rememberMe = userInfo.rememberMe
      return new Promise((resolve, reject) => {
        login(userInfo.username, userInfo.password, userInfo.code, userInfo.uuid).then(res => {
          setToken(res.token, rememberMe)
          commit('SET_TOKEN', res.token)
          setUserInfo(res.user, commit)
          getTeacherId(res.user.user.id,commit)
          // 第一次加载菜单时用到， 具体见 src 目录下的 permission.js
          commit('SET_LOAD_MENUS', true)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

    // 获取用户信息
    GetInfo({ commit }) {
      return new Promise((resolve, reject) => {
        getInfo().then(res => {
          setUserInfo(res, commit)
          resolve(res)
        }).catch(error => {
          reject(error)
        })
      })
    },
    // 登出
    LogOut({ commit }) {
      return new Promise((resolve, reject) => {
        logout().then(res => {
          logOut(commit)
          resolve()
        }).catch(error => {
          logOut(commit)
          reject(error)
        })
      })
    },

    updateLoadMenus({ commit }) {
      return new Promise((resolve, reject) => {
        commit('SET_LOAD_MENUS', false)
      })
    },
  }
}

export const logOut = (commit) => {
  commit('SET_TOKEN', '')
  commit('SET_ROLES', [])
  removeToken()
}

export const setUserInfo = (res, commit) => {
  // 如果没有任何权限，则赋予一个默认的权限，避免请求死循环
  if (res.roles.length === 0) {
    commit('SET_ROLES', ['ROLE_SYSTEM_DEFAULT'])
  } else {
    commit('SET_ROLES', res.roles)
  }
  commit('SET_USER', res.user)
}

export const getTeacherId=(id,commit)=>{
  queryByUserId({userId:id}).then(res => {
    let result=res ? res : null
    commit('SET_TEACHERID', result)
  })
}

export default user