上传头像后导航栏中头像同步(Vue中监听sessionStorage)

今天做项目的时候做到修改头像,修改头像后导航右侧也会同步更新,如图:

 

 

 

 于是需要做全局监听,如下:

基本步骤：

1. 封装全局监听方法：在main.js中给Vue.protorype注册全局方法。约定监听的sessionStorage的值为"watchStorage"，然后创建StorageEvent方法，当执行sessionStorage.setItem(k, val) 时，初始化事件，并派发事件

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);
      }

2. 触发，并将监听的值存入Storage。例如在某个路由中需要将某个值作为监听的值，则在该路由下的调用该方法。

this.resetSetItem('watchStorage', value); //value就是你要存入的值

3. 监听，如果在另一个路由下需要根据watchStorage的值变化来刷新请求的页面数据时，可以在这个路由下的created钩子函数中监听。

window.addEventListener('setItem', ()=> {
    //这里就可以根据具体情况调用或刷新需要的操作
    this.newVal = sessionStorage.getItem('watchStorage'); //获取监听的值
})