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 的值')

參考：

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

總結

以上是生活随笔為你收集整理的vue-element-admin中 vuex 的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。