vue3.0 监听本地存储

1. 现在main.js中注册全局方法，比如要监听的本地储存key值为‘changeData’

Vue.prototype.resetSetItem = function (key, newVal) {

  if (key === 'changData') {

      // 创建一个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);

  }

}

2 如何触发

在一个路由(比如路由A)存储值得时候，使用下面的方法：

this.resetSetItem('changeData',this.value);

3、如何监听

如果在另外一个路由(比如路由B)中，我们想根据changeData的变化来请求接口刷新页面数据的时候，可以在这个路由中created钩子函数中监听

window.addEventListener('setItem', ()=> {

    this.newVal = sessionStorage.getItem('changeData');

})