vue中实时监听本地存储

vue中实时监听本地存储

在main.js中

Vue.prototype.$addStorageEvent = function (type, key, data) {
  if (type === 1) {
  // 创建一个StorageEvent事件
  var newStorageEvent = document.createEvent('StorageEvent');
  const storage = {
      setItem: function (k, val) {
          localStorage.setItem(k, val);
          // 初始化创建的事件
          newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
          // 派发对象
          window.dispatchEvent(newStorageEvent);
      }
  }
  return storage.setItem(key, data);
} else {
  // 创建一个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, data);
}
}

想要的时候触发

 this.$addStorageEvent(2, "butCountNum", this.butCount);

在mouted钩子函数中进行监听

window.addEventListener('setItem', (e) => {
      if(e.key === "butCountNum"){
      	//写逻辑
      }