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 loginlogin({ commit }, userInfo) {const { username, password } = userInforeturn new Promise((resolve, reject) => {login(username.trim(), password).then(response => {const { data } = responsecommit('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 的值')

参考：