vue vuex axios 拦截器 全局loadding 全局加载

版权声明：Yangliwei 版权所有 https://blog.csdn.net/qq_32674347/article/details/88046798

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