最详细的axios+vuex请求封装以及使用实例

一、Vux相关介绍

1.Vuex基本概念

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。在单页面应用中可保证各个组件之间的相互通信。
1.下载安装vuex插件

   npm install vuex

2.在项目目录里面创建一个专门的store文件夹用来存放vuex对应的操作
说明：

• 创建一个store文件这样的好处是，当我们的项目比较大，请求后端接口比较多的时候，后端可能会采用微服务的方式进行，搭建，我们前端可以根据后端的服务划分，来创建不同的数据请求仓库，这样会使得我们的项目在后期维护起来特别方便。

3.store文件夹中创建indx.js文件，开始封装index.js文件
index文件可以引入每个功能模块对应的vuex文件，可以根据项目模块的划分创建对应的数据仓库，以及请求文件，我们利用import和export 来进行不同模块的引入，导出，这样会使我们的项目更符合模块化。index.js文件中主要是引入其他模块的数据请求文件，类似于一个所有数据请求的父站点，根据你页面发出的请求地址，在去找对应的子站点。

比如这个文件中引入了两个请求模块，一个是登录的login模块，一个是用来存放项目字典数据的dictionary模块
	 import Vue from 'vue'
	 import Vuex from 'vuex'
	 Vue.use(Vuex);
	 import login from './login'//登录vuex模块文件
	 import dictionary from './dictionary'//字典vuex模块文件
	
	 const store = new Vuex.Store({
	 	modules: {
	  		login,
	  		dictionary
	 		}
		});
	 export default store

4.main.js文件引入store并使用（默认会去引入index.js文件）
封装完成index之后在项目的全局文件main.js中引入store，并且，要在Vue实例中使用store

 import store from './store'
 new Vue({
  el: '#app',
  store
 )}

二、Axios相关介绍

1.axios基本概念

axios是在Vue项目中最常用进行前后端数据请求的一种方式，

1.下载安装axios

npm install axios

2.创建对应axios文件夹，用来对axios进行二次封装（创建apiConfig和index文件）

说明：

1. apiConfig.js中主要用来同意封装后端接口地址，方便修改，最好设置本地，测试，正式，三种环境，这样的话便于我们日后维护，开发。

2. index.js文件主要是对请求的封装，包括请求的封装和响应的封账，以及对后端抛出常见错误码的拦截

3.apiConfig.js文件

   const apiConfig = {
     apiFun() {
    let baseUrl = {};
    switch (1) {
      case 1:
     baseUrl = {
      //本地
        api:''
     };
     break;
      case 2:
     baseUrl = {
     // 线上测试环境
       api: '',
     };
     break;
      case 3:
     baseUrl = {
     // 线上正式环境
       api: '',
     };
     break;
      default:
     break;
    }
    return baseUrl
     }
   };
   export default apiConfig.apiFun()

4.index.js拦截二次封装

   import Vue from 'vue';
   import axios from "axios";
   import store from "../store"
   import apiConfig from "./apiConfig";
   import $api from '../axios/apiConfig'//接口

   //接口
   for (let k in apiConfig) {
     Vue.prototype[k] = apiConfig[k];
   }
   const Axios = axios.create({
     timeout: 20000,
     responseType: "json",
     headers: {
    'Content-Type': 'application/json',
     }
   });
   let loadAll;
   Axios.interceptors.request.use(
     config => {
     let userInfo=JSON.parse(window.localStorage.getItem('userInfo')||'{}');
     添加token
     if (userInfo&&userInfo.accessToken) {
    config.headers['Authorization'] = userInfo.accessToken;
     }else{
    window.localStorage.clear()
     }
     if (config.mask !== false) {
    loadAll = Loading.service({
      lock: true,
      text: '加载中',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
     }
     return config;
   },
   err => {
     return Promise.reject(err);
   });

   Axios.interceptors.response.use(
     response => {
     setTimeout(()=> {
    loadAll.close();
     }, 500);
     if (response.data.code === 200) {
    //操作成功返回数据
    return response.data;
     } 

5.main.js中引入axios并使用

   import Axios from './axios'
  （会默认去找axios文件下的index.js文件）
   Vue.prototype.axios = Axios;
   （在Vue的原型中增加axios）

三、Axios+Vuex获取后端数据

1.实例演示使用Vuex+Axios获取后端数据

说明：

1.通过简单的模拟用户登录过程中的操作，向大家展示Vuex和axios的正确使用姿势

假如在a页面调用登录接口

login()
			this.logInfo = {
				userName:'za',
				password:'123' 
			}
			//vuex利用dispacth调用actions中的请求，完成一次前端和服务端的数据通信
			this.$store.dispatch("login/adminLogin", this.logInfo).then(res => {
				  if (res) {
					this.$router.push({
					  path: "/"
					});
				  }
			});

2.Vuex中对应的login.js文件请求后端

 import $api from '../axios/apiConfig'//接口
 import axios from '../axios'//请求
	const module = {
	  namespaced：true，
	  state:{},
	  mutations:{},
	  actions:{
	   adminLogin(context, data) {
	   通过封装的promise来进行后端请求
	    return new Promise((resolve) => {
	     axios.post($api.api + '/login', data).then(res => {
	      if (res) {
	      拿到数据之后返回给前端
	       	       resolve(res.data)
	      }
	     })
	    })
	   }
	  }
	 }
	  export default module //导出模块

四、异步操Vuex

1.实例

 假如你在a页面中需要操作仓库，那么你只需要找到store中对应的文件，比如当你登录成功之后想将用户的信息存储在vuex中
  登录成功之后你可以通过this.$store.commit来操作对应仓库中的mutations,mutations可以改变vuex中的state

this.$store.commit（'login/setUserName',this.userName）
this.$store.commit('login/setToken',this.Token)

**
对应的login仓库模块中需要有setToken方法和setUserName方法（注意vuex只有mutations可以操作state）
**

 const module = {
	   namespaced：true，
	   state:{
	    userInfo：{
	     userName:'',
	     Token:''
	    }
	   },
	   mutations:{
	    setUserName（state,val）{
	     state.userInfo.userName = val
	    },
	    setToken(state,val){
	     state.userInfo.Token = val
	    }
	   },
	  }

这样信息就存在了vuex中，我们就可以在项目中的所有组件中使用了，如何使用，在使用的时候我们可以借助，Vue的一个计算属性，这样的话能优化我们的性能，只有当Vuex缓存变化的时候才会执行。
在页面中使用this.$store.state.login.userName，可以获取到state中的对应数据。
通过this.getuserName就可以获取到vuex中的数据

 computed: {
    getuserName() {
      return (
     this.$store.state.login.userName
      );
    }
   }