vue-admin是一套基于vue+elementUi的后台管理系统框架，对前端来说真的非常友好，对一些想要搭建后台管理系统的后端同事也是一个很好的框架，实用性很高。

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

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

<div class="avatar-wrapper">
  <img :src="avatar? avatar + '?imageView2/1/w/80/h/80' : 'https://carlover.oss-cn-hangzhou.aliyuncs.com/images/clothes.png'" class="user-avatar" />
  <i class="el-icon-caret-bottom" />
</div>

将avatar头像存储到VUEX中

在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
    }
  },