一套狠狠的axios封装流程，妈妈再也不担心你的学习(下)

1.首先我们要在我们想要封装axios的页面 通过dispatch触发actions。 this.$store.dispatch('模块名/actions名',载荷) 比如我们发登录请求 this.$store.dispatch('user/login',this.loginForm)

2.在store文件夹里面建好user.js导出vuex实例 export default{ //开启命名空间 namespaced:true, //1.state负责存储数据，目前里面的token和userInfo只是举个例子 state:{ token:'', userInfo：{} }, //2.mutations负责修改数据 mutations:{ updateToken(state,payload){ state.token=payload }, updateUserInfo(state,payload){ state.userInfo=payload } }, //3.actions负责异步操作 actions:{ actions名（当前的路由实例，传递过来的参数） 比如 login(context,payload){ } }

}

3.把user.js挂载到store文件夹的index.js中 import Vue from 'vue' import Vuex from 'vuex' import user from './user' Vue.use(Vuex) export default new Vuex.Store({ state:{}, getters:{}, mutations:{}, actions:{}, modules:{ user } })

4.在网络层我们要导接口 在api/user.js中 import instance from '@/utils/request' export const userLogin=data=>{ return instance.request('/api/login'，'post'，data) }

5.在store/user.js中导入接口 import {userLogin} from '@/api/user' 然后我们在 actions:{ actions名（当前的路由实例，传递过来的参数） 比如 async login(context,payload){ //(1)发送ajax const data=await userLogin(payload) console.log(data) //（2）调用commit提交mutations更新 context.commit('updateToken',data.token) //（3）提示框+跳转 this.$message.success('成功') this.$router.push('/') } }