【vue】event bus简单使用(在js文件与vue文件之间通信)

bus是vue自身就携带的，不用引入，方便但不适合广泛使用。

前情提要：

vue+ant design vue

ant design vue这个ui框架那是真不好用，我想要做全局的弹窗，需要在http工具js中根据axios的请求情况来控制到App.vue中spin组件。。。

//@/utils/bus.js

import Vue from 'vue'
const bus = new Vue()
export default bus

//这里为什么没选择挂载在this上呢？因为js文件中莫得this呀

//main.js

import bus from '@/utils/bus';

//挂载到this上
Vue.prototype.$bus = bus;

//@/utils/http.js

//引入bus
import bus from '@/utils/bus';

//在axios请求拦截中和相应拦截器中控制App.vue中的Spin的显示与隐藏
axios.interceptors.request.use(
	async config => {
		    axiosTimes++;
            //这里开启Spin蒙层
			bus.$emit('wholeSpin',true);
			let token = await initToken();
			if (token) {
				config.headers.token = token;
			}
			return config;
		},
		async error => {
			message.error('网络不给力,请稍后再试');
			return Promise.reject(error);
		}
);


axios.interceptors.response.use(
	response => {
		axiosTimes--;
        //所有请求返回后，再关闭Spin蒙层，这里通过bus传值给App.vue
		if (axiosTimes == 0) bus.$emit('wholeSpin',false);
		let data = response.data;
		if (data.isSuccess == false) {
			message.warning(response.data.description);
		}
		if (data.code == 10000) {
			console.log(data.code);
			console.log(router.currentRoute.fullPath);
			router.replace('/login');
		}
		return response.data;

	},

	error => {
		let errorMsg = '';
		if (error) {
			console.log(error);
		}
		if (error && error.response) {
			switch (error.response.status) {
				case 400:
					errorMsg = "请求错误(400)";
					break;
				case 401:
					errorMsg = "未授权，请重新登录(401)";
					router.replace({
						path: "/login",
						query: {
							redirect: router.currentRoute.fullPath
						},
					});
					break;
				case 403:
					errorMsg = "无权限，拒绝访问(403)";
					console.log(403);
					break;
				case 404:
					errorMsg = "请求出错(404)";
					console.log(404);
					break;
				case 408:
					errorMsg = "请求超时(408)";
					console.log(408);
					break;
				case 500:
					errorMsg = "服务器错误(500)";
					break;
				case 501:
					errorMsg = "服务未实现(501)";
					console.log(501);
					break;
				case 502:
					errorMsg = "网络错误(502)";
					console.log(502);
					break;
				case 503:
					errorMsg = "服务不可用(503)";
					console.log(503);
					break;
				case 504:
					errorMsg = "网络超时(504)";
					console.log(504);
					break;
				case 505:
					errorMsg = "HTTP版本不受支持(505)";
					console.log(505);
					break;
				default:
					errorMsg = `连接错误(${error.response.status})`;
					console.log("default");
			}
		} else {
			console.log("连接服务器失败!");
			errorMsg = "连接服务器失败!";
            //开启Spin蒙层
			bus.$emit('wholeSpin',true);
		}
		message.error(errorMsg);
		console.log("errorMsg");
		return Promise.reject(error);
	}
);

//App.vue

<template>
	<div id="app">
		<a-spin :spinning="wholeSpin" class="wholeSpin" size="large">
			<div class="spin-content">
				<a-config-provider :locale="locale">
					<router-view />
				</a-config-provider>
			</div>
		</a-spin>
	</div>
</template>

<script>
export default {
    data() {
		return {
			locale: zhCN,
			wholeSpin: false
		};
	},
    created() {
       this.$bus.$on('wholeSpin', msg => {
           //这里获取到http工具js文件中传过来的wholeSpin值
		   this.wholeSpin = msg;
	   });
    }
}
</script>