Vue中实时监听多个storage的方法

导语：

　　在多个组件需要共用一个值的时候，应用父子组件传值的知识会很麻烦，又没有必要通过vuex来储存几个数据，刚好我本次项目的数据和session中数据的性质一致，因此把两个数据存到了session中并实时监听。（也可以多个）

 

1、将想要实时监听的数据存储到session中

 

 ‘username’为获取共享数据的key值，_this.loginForm.name为存入的数据。

2、在main.js文件中编写以下代码：

Vue.prototype.resetSetItem = function (key, newVal) {
  // 创建一个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)
    }
  }
    // 根据判断获取session中存入的多个值
  if (key === 'username') {
    return storage.setItem(key, newVal);
  } else if (key === 'value') {
    return storage.setItem(key, newVal)
  }
}

3、在生命周期created中实现实时监听

created() {
        window.addEventListener('setItem', ()=> {
            console.log(sessionStorage.getItem('username'))
            }
        }
  },