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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了上传头像后导航栏中头像同步(Vue中监听sessionStorage)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1170字，纯文字阅读大概需要2分钟。

内容图文

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

 

 

 

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

基本步骤：

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中监听sessionStorage)全部内容，希望文章能够帮你解决上传头像后导航栏中头像同步(Vue中监听sessionStorage)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---