vue不同组件中监听Localstorage变化并实时更新---ing

一、解决问题

一个组件发布，其余组件更新
当我们需要更改一个组件实时更改或更新另外一个或多个组件状态或数据时，按照此方式
解决状态：完美解决

二、实现实例

1、控制组件，触发后向浏览器保存数据

 localStorage.setItem("numFlag", JSON.stringify(this.swValue))

建window.dispatchEvent派发事件

//在项目的根目录创建utils文件夹，再创建一个tool.js文件
//我们可以对setItem事件进行重写，当使用setItem的时候，触发window.dispatchEvent派发事件
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)
        signSetItem.apply(this, arguments)
    }
}

export default dispatchEventStroage;

2、main.js全局引入

import tool from "./utils/tool";
Vue.use(tool);

3、在所需要监听localstorage值的组件中写入监听事件

根据需要监听相应的key（此处需要监听的是localstorage中的numFlag，所以e.key对应numFlag）
newValue在此处就是最新的localstorage.numFlag，赋给data中的numFlag，即可实时响应在页面中
  mounted() {
    let that = this;
    window.addEventListener("setItemEvent", function (e) {
      if (e.key === "numFlag") {
        that.numFlag = e.newValue;
      }
    })
  },

三、参考

参考
参考
参考
搜索字段