1.首先在main.js中声明全局变量
注：这个key==='roleName’的值为你存储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('xxxxx', value);  
//后 ----加入你所需的key和value值
this.resetSetItem('xxxxx', value);

三、在获取sessionStorage的页面的created中加入以下代码
这里注意原来获取到的sessionStorage.getItem(‘key’)代码不要删除，这里是监听变化的代码，把之前的删除初始的数据就没有了

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

**

总结：发现vue能读取到值，sessionStorage能实时更新了，但浏览器刷新后就发现vue就不能读取到值了。

**
解决方法：
1.存储两次数值

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

2.在获取sessionStorage的页面的created中加入以下代码就可以刷新时读取到储存的信息了

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

解决