美食杰的个人主页编辑资料

首先我们先从vuex中拿到没修改之前的头像，名字，个人简介，判断登录页的token合不合法。

<div class="edit-item">
      <span class="label">修改头像</span>
      <upload-img
        imgMaxWidth="210"
        action="/api/upload?type=user"
        :imageUrl="avatar"
        @res-url="
          (data) => {
            avatar = data.resImgUrl;
          }
        "
      ></upload-img>
    </div>
    <div class="edit-item">
      <span class="label">修改名称</span>
      <div>
        <el-input v-model="name" class="create-input" placeholder="请输入内容">
        </el-input>
      </div>
    </div>
    <div class="edit-item">
      <span class="label">个人简介</span>
      <div>
        <el-input
          v-model="sign"
          type="textarea"
          class="create-input"
          placeholder="请输入内容"
        ></el-input>
      </div>
    </div>
    <div>
      <el-button class="send" type="primary" size="medium" @click="save">保存</el-button>
    </div>

然后再开始我们的修改数据

async save() {
      //告诉服务器保存新的数据
      let data = await userEdit({
        avatar: this.avatar,
        name: this.name,
        sign: this.sign,
      });
      console.log(data);
      //保存成功后 跳转到新的页面
      if (data.code === 0) {
        this.$router.push({
          name: "space",
        });
      }
    }

这样就完成我们的效果了