Personal settings (c) - modification of the basic information acquired data -async -create asynchronous get specific background data application component passed by value & Brothers

03- Personal settings - modify the basic information

Fill out a form to obtain personal information

src / views / setting / index.vue in export default in

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

Add photo to use in field Modify avatar:

src / views / setting / index.vue the data in the statement

photo: ''
// imageUrl: null

src / views / setting / index.vue the div box

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

Data submitted after modification

• Click Save Settings when the
  • Submit modified data to the background
  • success:
    • prompt
    • Local stores the user name needs to be modified
    • home components need to modify the user name

src / views / setting / index.vue the div box

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

src / views / setting / index.vue of methods in

 // 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 component binding event: views / home.vue

Objective: To modify the home component username -> pass before the value of brotherhood components

+   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   //拿到数据后，更新数据
+    })
  },