7.vuex,axios拦截器实现Loading加载条

官网http://axios-js.com/zh-cn/docs/index.html#%E6%8B%A6%E6%88%AA%E5%99%A8

7.1main.js设置axios拦截器

yarn add axios
import axios from 'axios'
Vue.prototype.axios=axios;
axios.interceptors.request.use(function (config) {
  store.state.isLoading=true;
  return config;
})
axios.interceptors.response.use(function (response) {
  store.state.isLoading=false;
  return response;
});
//使用vant-ui实现loading
1.安装依赖
yarn add vant
2.引入依赖
import Vant from 'vant'
import 'vant/lib/index.css'
import { Loading } from 'vant'; 
Vue.use(Loading);      //注意这个有顺序关系,放在引入的下面
Vue.use(Vant)

7.2vuex

//store/index.js
export default new Vuex.Store({
  state:{
    isLoading:true
  },
 ...
})

7.3在全局组件里面使用—App.vue

<template>
  <div id="app">
   <van-loading v-if="this.$store.state.isLoading" 
    size="24px" type="spinner" color="#1989fa">加载中...</van-loading>
   ...
  </div>
</template>