vant的Loading加载组件的使用

在store.js中使用vuex全局控制loading显示与隐藏

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    LOADING: false
  },
  mutations: {
    showLoading(state) {
      state.LOADING = true
    },
    hideLoading(state) {
      state.LOADING = false
    }
  }

loading组件

在App.vue中，将loading组件挂载到工程根节点

在封装好的axios中，利用axios的拦截器实现请求时提交store显示loading；
请求失败或者完成提交store隐藏loading。

import Vue from "vue";
import axios from 'axios';
import store from '../../store';

// 请求拦截器
axios.interceptors.request.use(function (config) {
  store.commit('showLoading')
  return config;
}, function (error) {
  store.commit('hideLoading')
  return Promise.reject(error);
});

//响应拦截器
axios.interceptors.response.use((response) => {
  store.commit('hideLoading')
  return response.data;
}, (error) => {
  store.commit('hideLoading')
  return Promise.reject(error);
});

//绑定到vue原型中
Vue.prototype.$http = axios;

如果在单个请求中使用

// 在请求时
this.$store.commit('showLoading')
       
//请求完成后  
this.$store.commit('hideLoading')