vue中监听本地储存的值变化

前言

这个操作是在vue中一个组件的值发生变化，从而别的组件都可以监听到，从而发生一系列的操作，是这样的一个功能，也是挺实用的。要达成这个功能的前提是得存到本地才能产生监听的效果

一、在main中配置代码

Vue.prototype.resetSetItem = function (key, newVal) {
  if (key === 'data') {
    // 创建一个StorageEvent事件
    var newStorageEvent = document.createEvent('StorageEvent');
    const storage = {
      setItem: function (k, val) {
        sessionStorage.setItem(k, val);
        // 初始化创建的事件
        newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
        // 派发对象
        window.dispatchEvent(newStorageEvent)
      }
    }
    return storage.setItem(key, newVal);
  }
}

二、在准备修改本地储存值的组件中

this.resetSetItem("data", arr);

三、在监听变化的组件中写入

window.addEventListener("setItem", () => {
    console.log('它发生变化了')
});

结语

这个功能在项目中还是挺实用的，希望对你的项目可以起到作用