项目中个人中心模块用户的头像上传后，联动更改导航栏头部的用户头像URL

需求点.png

动态的效果图在文章末尾，有相同需求的可参考思路

在项目的个人模块中，用户是可以去修改一些自己的信息数据的，比如：更换头像的上传...
接下来看下项目的目录结构，个人中心是单独的构建的一个目录文件，而顶部是Layouts的布局结构目录。

项目目录结构.png

这种很容易联想到Vuex状态管理器，因为数据共享！如何联动？监听！此处监听的是Vuex状态管理器。

1、Vuex数据存储定义内容

其中有几个要素是组成Vuex的关键, state(状态) mutations actions ,

state 表示需要共享的状态数据

mutations 表示更改 state的方法集合只能是同步更新不能在这里写一些异步的请求操作

actions 如果需要做异步请求可以在actions中写在这一步骤中做异步的数据获取！！！一定需要注意的是此处仅仅只是对异步数据的获取，真正的处理操作还是在mutations，actions拿到数据然后提交给 mutations后 mutation再做同步更新。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        imgUrl:'',//存储头像的照片url
    },
    mutations: {
        // 同步函数的处理
        // 头像设置
        setImg(state,payload){
            state.imgUrl = payload;//将载荷的值给vuex
        }
    }
})

2、个人中心头像上传的操作处理

2.1、头像上传成功的操作：
这里共执行了两个重要的步骤：一是将上传到服务器的头像的url地址存入到会话，因为不存到会话的话，直接使用Vuex的值，用户刷新页面的话，页面的数据是会消失的，因为组件重新执行了生命周期！，因此先存到缓存。第二个重要步骤就是将更新的头像的url地址同步更新到Vuex状态管理器中去，这样Layouts中处理监听的时候能够监听到管理器中的数据发生改变。

       <!--头像上传-->
      <div class="user-photo">
        <div class="user-img">
          <img :src="headSculpture" alt="" />
        </div>
        <div class="user-upload">
          <el-upload
            :before-upload="beforeAvatarUpload"
            :on-success="handleAvatarSuccess"
            accept=".jpg,.png"
            :show-file-list="false"
            :action="imgUrl"
          >
            <el-button size="small" type="primary">修改头像</el-button>
          </el-upload>
        </div>
      </div>


    /* 上传头像成功时的回调函数 */
    handleAvatarSuccess(res, file) {
      this.userForm.headSculpture = res.data.fileIds[0];
      postUpdateHeadImg({
        // uid: JSON.parse(sessionStorage.getItem("userInfo")).uid,
        headSculpture: this.headSculpture,
      })
        .then((res) => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "修改头像成功",
              duration: "1000",
            });
            // 更新会话内容
            sessionStorage.setItem("userInfo", JSON.stringify(this.userForm));
            // 获取新的会话中的内容
            this.userForm = JSON.parse(sessionStorage.getItem("userInfo"));
            this.$store.commit("setImg", this.userForm.headSculpture);//设置Vuex中的数据，头部也要使用共享数据
            this.headSculpture = this.userForm.headSculpture;
          }
        })
        .catch();
    },

3、头部导航栏的头像URL监听处理

这里监听到值后只需要将url进行一次赋值即可，因为此时用户刷新界面的话，数据也不会消失，因为当生命周期重新执行时，在mounted生命周期中也是会被执行一次，会去会话中找寻对应的url地址。

  watch:{
    '$store.state.imgUrl'(newVal){
        this.userImg = newVal;
        this.$forceUpdate();// 更新数据
    }
  },

mounted(){
      // 初始化头像
      if (sessionStorage.getItem("userInfo")) {
        this.userImg = JSON.parse(
          sessionStorage.getItem("userInfo")
        ).headSculpture;
        this.user = JSON.parse(sessionStorage.getItem("userInfo")).name;
      } else {
        // 没有上传头像就使用本地自带的默认头像
        this.userImg = require("@/assets/admin.png");
      }
}

4、大致效果

头像的联动修改.gif