Vue多组件互通数据（通过使用storage储存数据）

导语：

　　在多个组件需要共用一个值的时候，应用父子组件传值的知识会很麻烦，又没有必要通过vuex来储存几个数据，因此使用storage进行数据存储并实时监听。（可以多个）

 

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

this.resetSetItem('userName', _this.loginForm.name)
this.resetSetItem('password', _this.loginForm.password)

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

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

Vue.prototype.resetSetItem = function (key, newVal) {
  // 可通过key值做判断对数据进行过滤
  // 创建一个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)
}

3、在生命周期created中监听数据

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