最近碰到一个需求，要求移动端远程控制大屏的真实与模拟数据之间的自由切换。于是想到可以设置一个变量用于标识数据是否为真实数据或模拟数据，并且将变量储存在localstorage中。移动端按钮修改大屏浏览器本地缓存中的变量值，在需要切换数据的vue页面中通过事件监听变量值的变化。以此来做真实数据与模拟数据之间的逻辑切换。

1.在utils中新建一个文件watchLocalStorage.ts

export default function dispatchEventStroage() {
	const signSetItem = localStorage.setItem
	localStorage.setItem = function (key, val) {
		let setEvent = new Event('setItemEvent')
		setEvent.key = key
		setEvent.newValue = val
		window.dispatchEvent(setEvent)
		// eslint-disable-next-line prefer-rest-params
		signSetItem.apply(this, arguments)
	}
}

2. 在main.js中引入并挂载

import dispatchEventStroage from './utils/watchLocalStorage'
Vue.use(dispatchEventStroage);

3.在需要监听的地方使用如下代码

mounted () {
      // 监听localhostStorage的数据变化，结合utils/tool.js配合使用
      const that=this 
      window.addEventListener('setItemEvent', function (e) {
        if (e.key === 'myKey') {   // myKey是需要监听的键名
          that.mykey = e.newValue;
          console.log(JSON.parse(e.newValue))   // 这里的newValue就是localStorage中，键名为myKey对应的变化后的值。
          console.log('本地存储值发生变化：', e.newValue)
        }
      })
    },