【VUE】vue监听sessionStorage变化

1、添加全局事件sessionStorage监控方法

// 添加全局事件sessionStorage监控方法
Vue.prototype.setProvinceSession = function (key, newVal) {
  if (key === 'attProvince') {
      // 创建一个StorageEvent事件
      let newStorageEvent = document.createEvent('StorageEvent');
      const storage = {
          setItem: function (k, val) {
              sessionStorage.setItem(k, val);

              // 初始化创建的事件
              newStorageEvent.initStorageEvent('setProvinceItem', false, false, k, null, val, null, null);

              // 派发对象
              window.dispatchEvent(newStorageEvent)
          }
      }
      return storage.setItem(key, newVal);
  }
}

2、如何触发

this.setProvinceSession('attProvince', this.value);

3、如何监听，在 created 或者mounted监听

handle方法定义在methods

window.addEventListener('setProvinceItem', this.handle);

4、销毁

destroyed() {
  // 解除事件监听，防止内容泄漏
  window.removeEventListener('setProvinceItem', this.handle);
}