在Vue中监听storage（全局封装使用）

应用点：个别的共享数据可以不使用vuex，直接使用storage来存储公共数据。

重点：如何做到在保存数据的同时，可以在另一个路由中监听到数据的变化并且执行相应的操作。

基本步骤：

1. 封装全局监听方法：在main.js中给Vue.protorype注册全局方法。约定监听的sessionStorage的值为"watchStorage"，然后创建StorageEvent方法，当执行sessionStorage.setItem(k, val) 时，初始化事件，并派发事件。

Vue.prototype.resetSetItem = function (key, newVal) {
      if (key === 'watchStorage') {
          // 创建一个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. 触发，并将监听的值存入Storage。例如在某个路由中需要将某个值作为监听的值，则在该路由下的调用该方法。

this.resetSetItem('watchStorage', value); //value就是你要存入的值

3. 监听，如果在另一个路由下需要根据watchStorage的值变化来刷新请求的页面数据时，可以在这个路由下的created钩子函数中监听。

window.addEventListener('setItem', ()=> {
    //这里就可以根据具体情况调用或刷新需要的操作
    this.newVal = sessionStorage.getItem('watchStorage'); //获取监听的值
})

 

这是之前看的一个大神分享的完整案例，详细的：点击查看