vue-element-admin中 vuex 的使用

vue-element-admin 中 vuex 是模块化的。

登录流程

1，HTTP 配置（utils/request.js）

2，API 配置（api/user.js）

import request from '@/utils/request'

export function login(username, password) {
  return request({
    url: '/api-auth/oauth/user/token',
    headers: {
      'client_id': 'jeecp',
      'client_secret': 'webApp'
    },
    method: 'post',
    data: { 'username': username, 'password': password }
  })
}

3，vuex 中的 user 模块 （store/modules/user.js）

（在store/modules中创建一个自己的 store （user.js） 模块，并在其中书写自己的state/mutation/action ）

import { login } from '@/api/user'
import { getToken } from '@/utils/auth'

const getDefaultState = () => {
  return {
    token: getToken()
  }
}
// 相当于Vue的data
const state = getDefaultState()

const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token
  }
}

const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login(username.trim(), password).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.access_token)
        setToken(data.access_token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

4，获取全部的全局变量（store/getters.js）

// 相当于把全部的 全局变量 归结到了一起
const getters = {
  token: state => state.user.token
}
export default getters

5，注册vuex 注册 user 模块

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import user from './modules/user'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user
  },
  getters
})

export default store

6，在页面中使用

// 变量
this.$store.state.user.token
// 获取 store/getters.js 里面的值
this.$store.getters.token

// 方法
// 通过 this.$store.dispatch() 访问到 对应 user 模块中的 actions 中的 login 方法
this.$store.dispatch('user/login', this.loginForm).then(() => {
    console.log('success')
}).catch(() => {
    console.log('err')
})

// 修改
this.$store.commit('SET_TOKEN', '这里是 token 的值')

参考：

• https://www.cnblogs.com/ycc1/p/vuex01.html
• https://blog.csdn.net/wangle_style/article/details/90287742