loading怎么关闭 vant_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')