vue后台管理：增加vuex状态管理和封装axios请求stonezry的专栏-const actions = { // user login login({ commit },

引入vuex状态管理

这里主要是参考了vue-element-admin的项目。先

先创建store的文件夹，创建index.js主文件：

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 

gettters.js文件：

const getters = {   token: state => state.user.token,   avatar: state => state.user.avatar,   name: state => state.user.name } export default getters 

modules/user.js文件

import { getToken, setToken, removeToken } from '@/utils/auth' import { resetRouter } from '@/router' import { login } from '@/api/user' const getDefaultState = () => { return {     token: getToken(),     name: '',     avatar: '' } } const state = getDefaultState() const mutations = { RESET_STATE: (state) => {     Object.assign(state, getDefaultState()) }, SET_TOKEN: (state, token) => {     state.token = token   }, SET_NAME: (state, name) => {     state.name = name   }, SET_AVATAR: (state, avatar) => {     state.avatar = avatar   } } const actions = { // user login login ({ commit }, userInfo) { return new Promise((resolve, reject) => { login(userInfo).then(response => { const { data } = response         commit('SET_TOKEN', data.data.token) setToken(data.data.token) resolve() }).catch(error => { reject(error) }) }) }, // user logout logout ({ commit, state }) { return new Promise((resolve, reject) => { removeToken() // must remove  token  first resetRouter() commit('RESET_STATE') resolve() }) }, // remove token resetToken ({ commit }) { return new Promise(resolve => { removeToken() // must remove  token  first commit('RESET_STATE') resolve() }) } } export default {   namespaced: true,   state,   mutations,   actions } 

在main.js进行配置

封装axios请求

首先创建utils/request.js

import axios from 'axios' import store from '@/store' import { getToken } from '@/utils/auth' // create an axios instance const service = axios.create({   baseURL: '/api', // url = base url + request url // withCredentials: true, // send cookies when cross-domain requests   timeout: 5000 // request timeout }) // axios请求拦截 service.interceptors.request.use(config => {   config.headers.Authorization = getToken() return config }) // response interceptor service.interceptors.response.use( /**    * If you want to get http information such as headers or status    * Please return  response => response   */ /**    * Determine the request status by custom code    * Here is just an example    * You can also judge the status by HTTP Status Code    */   response => { const res = response.data     // if the custom code is not 20000, it is judged as an error. if (res.code === 10) {       store.dispatch('user/resetToken').then(() => {         location.reload() }) return Promise.reject(new Error('token 失效')) } else if (res.code !== 200) { return Promise.reject(new Error(res.msg)) } else { return response     } },   error => {     console.log('err' + error) // for debug return Promise.reject(error) } ) export default service  

其实之前我们本来是写在main.js文件的，现在抽离出来写而已。
创建一个api文件夹，后面不同模块的请求就可以创建不一样的文件来使用了，这里我们是用户请求的api，所以在文件夹创建一个user.js文件。

import request from '@/utils/request' // 登录 export function login (data) { return request({     url: '/userLogin',     method: 'post',     data   }) } // 获取权限菜单 export function getMenus (data) { return request({     url: '/getMenus',     method: 'get',     data   }) } // 获取用户列表 export function getUserList (data) { return request({     url: '/getUserList',     method: 'get',     params: data   }) } // 更新用户状态 export function updateUserState (params) { return request({     url: '/updateUserState',     method: 'get',     params   }) } // 添加用户 export function addUser (data) { return request({     url: '/addUser',     method: 'post',     data   }) } // 根据id获取用户信息 export function getUser (id) { return request({     url: `/getUser/${id}`,     method: 'get' }) } // 根据id编辑用户信息 export function editUser (id, data) { return request({     url: `/editUser/${id}`,     method: 'post',     data   }) } // 根据id删除用户 export function deleteUser (id) { return request({     url: `/deleteUser/${id}`,     method: 'get' }) } // 根据id删除用户 export function getRoles () { return request({     url: '/getRoles',     method: 'get' }) } // 设置角色 export function setUserRole (userid, roleid) { return request({     url: `/users/${userid}/role/${roleid}`,     method: 'put' }) } // 获取权限 export function rights (type) { return request({     url: `/rights/${type}`,     method: 'get' }) } // 获取角色列表 export function roles () { return request({     url: '/roles',     method: 'get' }) } // 删除角色里面的权限 export function deleteRightOfRole (roleid, rightid) { return request({     url: `/roles/${roleid}/rights/${rightid}`,     method: 'delete' }) } // 分配权限 export function allotRights (roleid, data) { return request({     url: `/roles/${roleid}/rights`,     method: 'post',     data   }) } // 添加和编辑角色 export function addOrEditRole (data) { return request({     url: '/addOrEditRole',     method: 'post',     data   }) } // 分配权限 export function deleteRole (roleid) { return request({     url: `/deleteRole/${roleid}`,     method: 'get' }) } 

使用方法：以首页获取菜单为例

先引入

import { getMenus } from '../../api/user' 

请求：

getMenus () { getMenus(this.loginForm).then(response => { const { data } = response         this.menuList = data.data       }).catch(error => { this.$message.error(error) }) } 

目前git项目已经对原来请求方式进行了调整。

欢迎关注本人公众号和小程序，谢谢