03-个人设置-修改基本信息

获取个人信息填充表单

src/views/setting/index.vue 中的export default里

 created () {
    // 获取个人信息
    this.getUserInfo()
  },
  methods: {
      //异步获取后台数据
    async getUserInfo () {
      const { data: { data } } = await this.$http.get('user/profile')
      this.userInfo = data
    }
  }

添加photo字段在修改头像使用：

src/views/setting/index.vue 中的data里声明

photo: ''
// imageUrl: null

src/views/setting/index.vue 中的div盒子里

<img v-if="userInfo.photo" :src="userInfo.photo" class="avatar">

修改后进行数据提交

• 点击保存设置的时候
  • 把修改后的数据提交给后台
  • 成功：
    • 提示
    • 本地存储 用户名称需要修改
    • home组件 用户名称需要修改

src/views/setting/index.vue 中的div盒子里

<el-button type="primary" @click="save">保存设置</el-button>

src/views/setting/index.vue 中的methods里

 // post 请求 post(‘地址’，‘数据’)
    // get 请求 get(‘地址’，‘{params:数据}’)

    //解构赋值
// 得到 用户 信息  res.data.data  res = {data:{data:'用户信息',message:'提示'}}
// 以前获取对象中的属性值：res.data ={data:'用户信息'}
// ES6提供解构赋值语法：{data:{data:data}}

  // 函数的返回值  加载await之后  是then接受的数据
  // 在使用await之后在 外层函数必须用async 来申明  
//await向后台发请求


async save () {
      const { name, intro, email } = this.userInfo
      await this.$http.patch('user/profile', { name, intro, email })
      // 成功
      this.$message.success('修改用户信息成功')
      // 更新本地存储的用户名称
      const user = store.getUser()  //拿过来
      user.name = name   //改名字
      store.setUser(user)   //设置回去
      // 更新HOME组件的用户名称
      eventBus.$emit('updateName', name)   //第三步：script下引入eventbus包  之后，谁传数据，谁用eventbus触发事件
    },

home组件绑定事件：views/home.vue

目的：修改home组件的用户名——>兄弟关系组件之前传值

+   import eventBus from '@/components/eventBus'   //第一步：script下引入eventbus包
 created () {
    const user = store.getUser()
    this.name = user.name
    this.photo = user.photo
    // 绑定事件 接受名字数据   第二步：谁要数据，谁用eventbus绑定事件
+    eventBus.$on('updateName', (name) => {
+      this.name = name   //拿到数据后，更新数据
+    })
  },