vue，监听sessionStorage的数据改变

vue项目中，监听sessionStorage的数据改变

需求：父组件中的随时可能改变的数据是缓存到sessionStorage里面的，子组件需要通过这个改变的数据，随时进行数据更新。

1. 监听父组件的数据变化并更新缓存
   vue中监听数据变化，在watch中写如下函数：
   watch: {
   date: function(newdate, olddate) {
   this.CurentTime(newdate)
   var date = this.CurentTime(newdate)
   sessionStorage.setItem(’_date_str’, date)
   this.resetSetItem(‘watchStorage’, date)
   }
   },
   
2. 子组件中，接收该数据
   _this.time = sessionStorage.getItem(’_date_str’)
3. 需要监听sessionStorage中的数据，要在main.js中写如下的代码
   
   // 保存整站vuex本地储存初始状态
   window.SITE_CONFIG[‘storeState’] = cloneDeep(store.state)
   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);
   }
   }
4. 在需要监听sessionStorage的组件中的create生命周期中，进行监听
   
   created () {
   window.addEventListener(‘setItem’, ()=> {
   this.newVal = sessionStorage.getItem(‘watchStorage’)
   this.time = this.newVal
   })
   },
   这样就可以监听到每一次数据变化，并进行相关的数据变换的操作啊