vue使用sessionStorage存储数据，页面不能实时更新

在vue中使用sessionStorage存储数据，当数据变化时页面不实时更新数据，需F5刷新页面才变化

其他页面存储，另一父组件页面获取，子组件渲染，刚开始一直以为是父子组件传递数据这里有bug

一、首先在main.js中声明全局变量

这段代码是在网上找来的，这个key===的值为你存储sessionStorage声明的key

// 只需修改xxxxx值，其余无需修改
Vue.prototype.resetSetItem = function (key, newVal) {
  if (key === 'xxxxx') {
    // 创建一个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);
  }
}

二、将存储声明变为以下格式

//前 
 sessionStorage.setItem('key', value);  
//后 ----加入你所需的key和value值
this.resetSetItem('key', value);

三、在获取sessionStorage的页面的created中加入以下代码

这里注意原来获取到的sessionStorage.getItem(‘key’)代码不要删除，这里是监听变化的代码，把之前的删除初始的数据就没有了

created(){
	window.addEventListener('setItem', ()=> {
	      this.xxxx= JSON.parse(sessionStorage.getItem('key'));
	})
}