vue全局loading组件

本组件作用在页面加载完成前进行loading提示，提升用户体验，只需要在app.vue中引用一次，整个项目中就可以自动进行提示(话不多说直接上)；

App.vue

//vant 组件
<van-loading type="spinner" v-if="loadingShow"  class="vanLoading"/>

<script>
import { mapGetters } from 'vuex';
export default {
  name: "App",
  data() {
    return {
      loadingShow: true
    };
  },
   computed: {
    ...mapGetters(['loadingData'])
  },
   watch: {
    'loadingData' (newVal, oldVal) {
      if (newVal === 0) {
       this.loadingShow = false
      }
    }
  }
};
</script>

store中新建并引入app.js
app.js

import { SET_LOADING } from './mutations_type';
let app = {
  state: {
    loadingStatus: 0
  },
  actions: {
    [SET_LOADING] ({ commit }, payload) {
      commit(SET_LOADING, payload);
    }
  },
  mutations: {
    [SET_LOADING] (state, payload) {
      if (payload === 0) {
        state.loadingStatus = 0
        return
      }
      state.loadingStatus = payload ? ++state.loadingStatus : --state.loadingStatus
    }
  },
  getters: {
    loadingData (state) {
      return state.loadingStatus;
    }
  }
}
// 封装全局loading
export default app;

export const SET_LOADING = 'SET_LOADING'

http.js中引入 SET_LOADING
设置一个axios拦截器

import { SET_LOADING } from '../store/modules/mutations_type';

//定义一个请求拦截器
axios.interceptors.request.use(function(config){
//在请求发出之前进行一些操作
  store.dispatch(SET_LOADING, true);
  return config
})
//定义一个响应拦截器
axios.interceptors.response.use(function(config){
//在这里对返回的数据进行处理
  store.dispatch(SET_LOADING, false);
  return config
})