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');

})

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容