其他分享
首页 > 其他分享> > 上传头像后导航栏中头像同步(Vue中监听sessionStorage)

上传头像后导航栏中头像同步(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'); //获取监听的值
})

 

标签:栏中,Vue,watchStorage,val,sessionStorage,头像,setItem,监听,路由
来源: https://www.cnblogs.com/wxy-developer/p/14605145.html