vuex 更新头像

有一个需求是这样的，有两个组件，分别叫组件A和组件B，组件A显示头像，组件B上传头像，头像上传后实时更新组件A的头像数据。

组件A显示头像使用 computed 绑定 src 数据

<template>
   <img md-menu-trigger :src="avatarUrl" alt="Avatar" class="avatar-position">
</template>

<script>
import * as types from '../store/types'
export default {
  data () {
    return {
    };
  },
  computed: {
    avatarUrl: function () {
      return this.$store.state.user.imgSrc
    }
  },
...

组件B上传后，实时更新组件A头像

<template>
    <md-whiteframe md-elevation="4" class="center">
      <md-toolbar class="md-dense">
        <md-button class="md-icon-button" @click.native="backClick()">
          <md-icon>keyboard_backspace</md-icon>
        </md-button>
        <h2 class="md-title flex-1">上传头像</h2>
      </md-toolbar>
      <div class="content">
        <div class="img-container cursor-pointer" @click="imgClick()">
          <img class="img-style" ref='imgAvatar' v-bind:src="imgSrc" alt="img" title="avatar" />
        </div>
        <form>
          <input type="file" class="display-none" ref="fileData" id="input1" accept="video/*;capture=camcorder" @change="readFile()"/>
          <md-button class="md-raised md-primary upload-postion" @click.native="submit()">上传头像</md-button>
        </form>
      </div>
    </md-whiteframe>
</template>
<script>
import * as types from '../store/types'
export default {
  data () {
    return { }
  },
  methods: {
    async submit () {
      let self = this
      if (self.$refs.fileData.files.length > 0) {

        let name = self.randomString() + '_' + self.fileName
        console.log(name)
        let url = await self.getUploadImageUrl(name)
        if (url) {
          self.axios.put(url, self.$refs.fileData.files[0], {
            headers: {
              'Content-Type': 'multipart/form-data'
            },
            transformRequest: [
              function (data) {
                return data
              }
            ]
          })
          .then(response => {
            console.log(response)
            if (response.status === 200) {
              console.log('upload success')
              self.snackbarMessage = '操作成功！ '
              self.$refs.snackbar.open()

              let imgSrc = config.fileServer.replace(/"/g, '') + '/' + config.wewoS3Bucket.replace(/"/g, '') + '/' + name
              self.$store.commit(types.IMGSRC, imgSrc)

              self.updateImageData(name)
            } else {
              self.snackbarMessage = '操作失败，服务异常！ '
              self.$refs.snackbar.open()      
            }
          })
        }
      } else {
        self.snackbarMessage = '您好，请先选择图片！ '
        self.$refs.snackbar.open()
      }
    },
    getUploadImageUrl (fileName) {
      let self = this
      return new Promise((resolve, reject) => {
        self.$store.state.autobahnSession.call('com.sg-ai.wewo.user.frontend.get_upload_image_url', [fileName])
          .then(
            function (res) {
              console.log('url')
              console.log(res)
              resolve(res)
            },
            function (err) {
              reject(err)
            })
      })
    },
    updateImageData (imageName) {
      let self = this
      let whereStr = { 'userName': self.userName }
      self.whereData = {'where': whereStr, 'update': { 'img': imageName }}
      self.$store.state.autobahnSession.call('com.sg-ai.wewo.user.frontend.change_user_info', [self.whereData])
        .then(
          function (res) {
            if (res === 1) {
              console.log('update success')
            } else {
              console.log('update error')
            }

          },
          function (err) {
            console.log('err')
            console.log(err)
          }
        )
    },
    imgClick () {
      this.$refs.fileData.click()
    },
    readFile () {
      var file = this.$refs.fileData.files[0]
      console.log(file)
      this.fileName = file.name
      if (!/image\/\w+/.test(file.type)) {
        alert('请确保文件为图像类型')
        return false
      }
      var reader = new FileReader()
      reader.readAsDataURL(file)
      var self = this
      reader.onload = function (e) {
        self.imgSrc = this.result
        var dataBase64 = this.result.replace('data:' + file.type + ';base64,', '')
        self.dataBase64 = dataBase64
      }
    },
    save () {
      let self = this
      let userName = this.userName
      let whereStr = { 'userName': userName }
      this.whereData = {'where': whereStr, 'update': { 'nikeName': this.nikeName, 'sex': this.sex, 'city': this.city, 'job': this.job }}
      this.$store.state.autobahnSession.call('com.sg-ai.wewo.user.frontend.change_user_info', [this.whereData])
        .then(
          function (res) {
            if (res.ok === 1) {
              console.log('操作成功！')
              self.$refs.snackbar.open()
            }
          },
          function (err) {
            console.log('err')
            console.log(err)
          }
        )
    },
    randomString (len) {
      len = len || 32
      let timestamp = new Date().getTime()
      let $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
      let maxPos = $chars.length
      let randomStr = ''
      for (let i = 0; i < len; i++) {
        randomStr += $chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return randomStr + timestamp
    }
  },
...
}
</script>