vue vuex axios 拦截器 全局loadding 全局加载
1,用到了vuex状态管理,axios拦截器,所以要在main.js引入这两个库,还要配置一下axios// axiosimport axios from 'axios'import qs from 'qs'// vueximport store from "./store.js"// 全局axiosaxios.defaults.timeout = 15000;Vue.pro.
·
1,用到了vuex状态管理,axios拦截器,所以要在main.js引入这两个库,还要配置一下axios
// axios
import axios from 'axios'
import qs from 'qs'
// vuex
import store from "./store.js"
// 全局axios
axios.defaults.timeout = 15000;
Vue.prototype.$ajax = axios;
Vue.prototype.$qs = qs;
2,设置一个axios拦截器
//定义一个请求拦截器
axios.interceptors.request.use(function(config){
store.state.loadding=true; //在请求发出之前进行一些操作
return config
})
//定义一个响应拦截器
axios.interceptors.response.use(function(config){
store.state.loadding=false;//在这里对返回的数据进行处理
return config
})
3,肯定有人已经看到了store.state的代码了,第三步就是修改store.js的代码
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
//状态
state: {
loadding: false
},
//状态修改方法
// 使用store.commit()来调用
mutations: {
// loadding
showloadding(state, load) {
state.loadding = load
}
},
//调用mutations,可以包含异步操作
// 可以用store.dispatch来调用
actions: {
,setloadding(context,load){
context.commit("showloadding",load);
}
},
getters: {
isloading:(state)=>{
return state.loadding
}
}
})
// 导出!!!!
export default store
4,光有这些是没有用的,因为不会显示,所以你要弄一个可以看到的loadding
这里因为我项目本身选择的是阿里的antd design vue 所以用了antd自带的加载组件,其实都差不多
5,在 app.vue中用加载中的组件把所有组件都包裹起来
<!-- 加载中 -->
<a-spin :spinning="this.$store.state.loadding"
tip="加载中...">
<a-icon slot="indicator"
type="loading"
style="font-size: 24px"
spin />
<router-view v-if="isRouterAlive"></router-view>
</a-spin>
:spinning 就是控制加载是否显示的,这里直接读取store状态,拦截器如果改变store,这里自动改变,非常方便
6,感谢阿里,感谢vue
更多推荐
已为社区贡献23条内容
所有评论(0)