在vue2中使用全局监听浏览器窗口变化，适配手机端判断

1新建文件windowSizeMixin.js

有三个属性可以使用windowWidth(窗口宽度)，windowHeight（窗口高度），MobileVerification（是否是在手机端）当然还可以加其他的内容
问题：

1. 如果设置了固定的宽度，比如给页面元素的宽度设置了定好的1200px后，会导致在f12界面改为手机端的时候innerWidth获取的宽度还是1200px，而不是手机端的宽度（未解决，我现在是强行不用固定宽度了，也可以用媒体查询来控制宽度）
2. 不知道会不会导致重复调用
3. 必须在页面的监听或者watch循环中调用

//混入，实时获取宽高并把判断是否是手机端，需要在调用的地方+watch
// src/mixins/windowSizeMixin.js
//混入，实时获取宽高并把判断是否是手机端，需要在调用的地方+watch
export default {
	data() {
		return {
			windowWidth: window.innerWidth, //视窗宽度
			windowHeight: window.innerHeight, //视窗高度
			MobileVerification: window.matchMedia('(max-width: 768px)').matches, //是否是手机端
			eduServerAddress: window.$eduServerAddress, //挂载全局链接
			indexServerAddress: window.$indexServerAddress, //挂载全局链接
		};
	},
	mounted() {
		window.addEventListener('resize', this.handleResize);
	},
	beforeDestroy() {
		window.removeEventListener('resize', this.handleResize);
	},
	methods: {
		handleResize() {
			//媒体查询写法
			const isMobile = window.matchMedia('(max-width: 768px)').matches;
			this.MobileVerification = isMobile;
			//bom写法
			// this.MobileVerification =
			// 	window.innerWidth <= 769 ||
			// 	/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
			// 		navigator.userAgent
			// 	);
			this.windowWidth = window.innerWidth;
			this.windowHeight = window.innerHeight;
		},
	},
};

2在main.js文件引入

import windowSizeMixin from '@/mixins/windowSizeMixin';//混入-浏览器窗口监听

Vue.mixin(windowSizeMixin);

3在具体代码调用

watch: {
		MobileVerification: {
			handler(to) {
			//处理函数
				this.isMobileVt();
			},
			immediate: true,
		},
	},