VUE 全局监听sessionStorage变化

在做项目的时候，可能需要在其他模块获取推送的信息或者变量，但是数据量或者说数目少，而且项目中也没有引用VUEX，那么可以下手的方法之一也就是sessionStorage类的浏览器存储了。

首先在全局的main.js中写入：

// 全局获取缓存数据
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);
  }
},

设置/修改方法就简单了:

 Vue.prototype.resetSetItem('watchStorage', 'false'); （在API中引入，引入文件为：import Vue from 'vue' ）

或：

 this.resetSetItem('watchStorage','false');

 

在需要的地方进行监听：

 

window.addEventListener('setItem', ()=> {
      _this.newVal = sessionStorage.getItem('watchStorage');
})

监听方法可以写在文件的create 或mounted中即可。