// axios拦截
// 请求拦截,将所有通过axios发送的请求拦截下来。拦截下来以后,可以在此处统一对AXIOS的配置进行管理
axios.interceptors.request.use((config)=>{
store.commit(“CAHNGE_IS_LOADING”,true);
config.url = “/ele”+config.url;// config.url -->/ele/login token
// console.log(config);
// config.url= “http://www.baidu.com”
return config;// 返回配置信息。如果不返回config请求是无法执行的。返回的配置信息才是你最终要请求的信息。
})
// 响应拦截:实现对数据过滤的。
axios.interceptors.response.use(res=>{
store.commit(“CAHNGE_IS_LOADING”,false);
// 返回值即是请求最终得到的内容。
return res.data;
})
//store-》index.js
import Vue from ‘vue’
import Vuex from ‘vuex’
import admin from “./admin”
Vue.use(Vuex)
export default new Vuex.Store({
state: {
// 存放项目的公共数据
isLoading: false
},
mutations: {
// 当加载数据时commit(‘CAHNGE_IS_LOADING’,true)
// 加载完毕时commit(‘CAHNGE_IS_LOADING’,false)
// $store是vue实例下面的属性。组件当中。接收的参数名字state
CAHNGE_IS_LOADING(state, isLoading) {
state.isLoading = isLoading;
}
},
modules: {
admin
}
})
//之后再ajax请求的时候都会使用到这个加载中的效果
//
s
t
o
r
e
.
s
t
a
t
e
.
i
s
L
o
a
d
i
n
g
<
e
l
−
f
o
r
m
−
i
t
e
m
>
<
e
l
−
b
u
t
t
o
n
:
l
o
a
d
i
n
g
=
"
store.state.isLoading <el-form-item> <el-button :loading="
store.state.isLoading<el−form−item><el−button:loading="store.state.isLoading" style=“width: 100%” @click=“submitForm” type=“primary”>登陆