1.在main.js中先引入axios、qs以及引进vuex
import axios from “axios”
import qs from “qs”
import store from "./vuex"
2.在main.js中设置全局axios
//全局axios
axios.defaults.timeout = 15000; //请求超时时间 发送请求后，多长时间还没有收到请求答复，就超时报错
Vue.prototype.$ajax = axios;//将axios请求挂载到 Vue.prototype上，将axios改写为vue的原型属性，在原型上定义它们使其在每个 Vue 的实例中可用。
Vue.prototype.$qs = qs;
3.定义一个拦截器和一个响应拦截器
//定义一个拦截器
axios.interceptors.request.use(function(config) {
//在请求发出之前进行一些操作
store.state.loadding = true;
return config;
});
//定义一个响应拦截器
axios.interceptors.response.use(function(config) {
//在这里对返回的值进行处理
store.state.loadding = false;
return config;
});
在这里可以看到其中有vuex中store.state的数据代码
4.在vuex中修改store.state的数据
import Vue from "vue";
import vueX from "vuex";
Vue.use(vueX);
var store=new vueX.Store({
state{
//状态
loadding:false
}，
mutations：{
//loadding状态修改方法
//store.commit()调用
showloadding(state, load) {
state.loadding = load;
},
}，
})
//！！！导出store
export default store
5.然后需要一个显示在页面的loadding
我这里用的是vant的loadding
在App.vue中将vant的loadding代码和router-view写在一起这样在路由跳转时没有请求到数据之前都会显示loadding加载中
自定义loadding样式及显示位置
App.vue
<template>
<div class="app">
<van-loading size="24px" vertical v-if="this.$store.state.loadding" class="jiazai">加载中...</van-loading>
<router-view />
</div>
</template>
