vue 使用antd design vue 配置全局的axios的loading

vue 使用antd design vue 配置全局的axios的loading

import Vue from 'vue'
import axios from './assets/js/axios'
Vue.prototype.$ajax = axios;

在axios.js文件中设置一个axios拦截器

import axios from 'axios'
import store from "../../store"
axios.interceptors.request.use(function (config) {
    store.state.loadding = true; //在请求发出之前进行一些操作
    return config
}, function (error) {
    return Promise.reject(error)
});
axios.interceptors.response.use(function (response) {
    store.state.loadding = false;//在这里对返回的数据进行处理
    return response.data
}, function (error) {
    return Promise.reject(error)
})
export default axios

3.就是修改store.js的代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  //状态
  state: {
    loadding: false
  },
  //状态修改方法
  // 使用store.commit()来调用
  mutations: {
    showloadding(state, load) {
      state.loadding = load
    }
  },
  // 可以用store.dispatch来调用
  actions: {
    setloadding(context,load){
      context.commit("showloadding",load);
    }
  },
  getters: {
    isloading:(state)=>{
      return state.loadding
    }
  }
})
// 导出
export default store

4.在 app.vue中用加载中的组件把所有组件都包裹起来

<a-spin :spinning="this.$store.state.loadding" tip="加载中...">
        <router-view /">
      </a-spin>