vue监听localStorage和sessionStorage数据变化

为什么不用vuex？

该项目是个多人合作项目，我要在已经写好的逻辑上进行开发，写好的逻辑——vuex中存储的变量会在每次页面刷新或切换页面时重新从后台获取，所以没有写页面一刷新就将vuex中数据存到本地，重新渲染时又将本地存储的数据读取出来重新放入vuex的监听函数。

而我需要的dots变量不是从后台获取的，也不能每次刷新都恢复初始值，所以不能把它存在vuex或者页面的data中，最好是放本地，但同时我还要实现一个页面中对dots变量的修改会影响到另一个页面中的数据更新，所以要对本地的dots变量进行监听。

1.main.js中在vue原型上注册全局方法

// 参数1-key 本地存储的变量名 newVal 参数1变量名对应的值
Vue.prototype.resetSetItem = function(key, newVal) {
  //if判断 可对本地存储的多个变量进行操作 
  if (key === "dots") {
    // 创建一个指定类型的事件对象（StorageEvent）
    var newStorageEvent = document.createEvent("StorageEvent");
    const storage = {
      //对象中定义方法
      setItem: function(k, val) {
        sessionStorage.setItem(k, val);
        // 初始化创建的事件对象
        newStorageEvent.initStorageEvent(
          "setItem",//事件名
          false,//事件是否通过dom冒泡
          false,//事件是否可取消
          k,//将会影响到的键命
          null,//键的旧值
          val,//键的新值
          null,//
          null
        );
        // 向window派发事件对象
        window.dispatchEvent(newStorageEvent);
      },
    };
    //调用对象的方法
    return storage.setItem(key, newVal);
  }
};

2.只有通过注册的全局方法对本地存储进行改变 才会被监听方法监听到

    this.resetSetItem("dots", JSON.stringify([1, 1, 1, 1]));

3.在需要监听本地存储的页面的mounted里写入

window.addEventListener("setItem", () => {
   // 操作
   // 例如 this.dots = [...JSON.parse(sessionStorage.getItem("dots"))];
});