vue-admin 通过VUEX实时更新头像功能实现

我会带着你远行 2021-07-25 18:16 931阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
vue-admin是一套基于vue+elementUi的后台管理系统框架，对前端来说真的非常友好，对一些想要搭建后台管理系统的后端同事也是一个很好的框架，实用性很高。

近期，我们公司正在做商户平台，根据商家Logo的图片上传，右上角的图标也要实时更新。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]

## 首先找到这个文件 src/layout/components/Navbar.vue ##

## 将avatar头像存储到VUEX中 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
在store中的user.js文件中，在state中添加avatar参数。

## 在Navbar.vue中加入computed和watch监听 ##

computed: { 
        avatarImg: { 
          get() { 
            return this.$store.state.user.avatar;
          },
          set(val) { 
          }
        }
      },
      watch: { 
        avatarImg: { 
          handler: function (val, oldVal) { 
            this.avatar = val;
          },
          immediate: true
        }
      },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/2ba210beff8b45c3ae64ba8fa3a42c25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/68cbbee1c6d94e90b6aa785e5d21c0f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/dcece6ad72434d16a0f94c56bc557f7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20210725/beef07fc74894870977c8fb974466413.png