vue-cli + vant h5工程 使用vuex+axios 控制封装全局loading加载组件

需求

vue脚手架搭建的h5工程，接口请求使用axios，每当请求发出，页面展现loading加载状态，请求完成或者请求失败，隐藏页面loading状态组件   组件采用了开源组件 vue-loading-spinner，GitHub地址为https://github.com/nguyenvanduocit/vue-loading-spinner 效果非常好的一款loading组件，可以根据实际项目自行编写loading组件或者npm install

完成效果

 

git clone https://github.com/nguyenvanduocit/vue-loading-spinner.git

下载到本地，或者

npm install --save vue-loading-spinner ｜｜ yarn add vue-loading-spinner

找到node_modulers 里边对应的库文件，喜欢哪个loading组件，将其复制出来，封装如下 外层套一个frame 设置高宽各100%，内层元素居中，固定定位，背景色，以及z-index等等，凸显loading效果

/src/components/Loading/loading.vue

src/store/index.ts  使用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;
		}
	}
});

src/App.vue 将loading组件挂载到工程根节点