把我們的資訊編輯頁稍微完善一些，並加上負責的 methods

<template>
  <div class="container">
    <b-card-group deck>
      <b-card title="Title" class="m-3">
        <div role="group" class="m-3">
          <label for="displayName">暱稱:</label>
          <b-form-input
            v-model="displayName"
            id = "displayName"
            trim
          ></b-form-input>
        </div>
        <div role="group" class="m-3">
          <label for="name">姓名:</label>
          <b-form-input
            v-model="name"
            id = "name"
            trim
          ></b-form-input>
        </div>
      </b-card>
    </b-card-group>

    <b-card-group deck>
      <b-card header="聯絡資訊" header-tag="header" class="m-3">
        <div role="group" class="m-3">
          <label for="email">信箱:</label>
          <b-form-input
            v-model="email"
            id = "email"
            trim
          ></b-form-input>
        </div>
        <div role="group" class="m-3">
          <label for="phoneNumber">電話號碼:</label>
          <b-form-input
            v-model="phoneNumber"
            id = "phoneNumber"
            trim
          ></b-form-input>
        </div>
        <div role="group" class="m-3">
          <label for="address">住址:</label>
          <b-form-input
            v-model="address"
            id = "address"
            trim
          ></b-form-input>
        </div>
      </b-card>
    </b-card-group>

    <b-card-group deck>
      <b-card header="簡介" header-tag="header" class="m-3">
        <div role="group" class="m-3">
          <label for="skills">專長:</label>
          <b-form-textarea
            id="skills"
            v-model="skills"
            placeholder="Enter something..."
            rows="3"
            max-rows="6"
          ></b-form-textarea>
        </div>
        <div role="group" class="m-3">
          <label for="intro">自我介紹:</label>
          <b-form-textarea
            id="intro"
            v-model="intro"
            placeholder="Enter something..."
            rows="3"
            max-rows="6"
          ></b-form-textarea>
        </div>
      </b-card>
    </b-card-group>

    <b-button @click.native="updateUserInfo" href="#" variant="primary" class="m-3">更新資料</b-button>
  </div>
</template>

<script>
export default {
  name: 'UserInfoEditor',
  data () {
    return {
      displayName: this.$store.state.currentUser.displayName,
      email: this.$store.state.currentUser.email,
      phoneNumber: '',
      name: '',
      address: '',
      skills: '',
      intro: '',
      photoURL: ''
    }
  },
  methods: {
    updateUserInfo () {
      const info = {}
      info.displayName = this.displayName
      info.email = this.email
      info.phoneNumber = this.phoneNumber
      info.address = this.address
      info.skills = this.skills
      info.intro = this.intro
      info.photoURL = this.photoURL

      this.F_updateProfile(info).then(function (res) {
        // Update successful.
      }).catch(function (error) {
        // An error happened.
        console.log(error)
      })

      this.F_setManagerData(info).then(function () {
        // console.log('Document successfully written!')
      }).catch(function (error) {
        console.error('Error writing document: ', error)
      })
    }
  }
}
</script>

FirebaseModel.vue 也要新增相應的方法:
用F _ 來開頭，表示自己客製化的 Firebase 系列方法，這樣就可以使後面維護的人知道，方便統一維護管理，現在我們的 Model 裡面方法的命名都還沒有一個統一的規格，所以後面我們會再重新的整理我們的 FirebaseModel.vue 的模組檔，重新的把方法設計，讓其更加容易調用和增加易讀性的部分。

// updateProfile 只支持更新 displayName、photoURL
F_updateProfile (userInfo) {
  console.log('觸發了F_updateProfile')
  var user = firebase.auth().currentUser
  return user.updateProfile({
    displayName: userInfo.displayName
    // photoURL: photoURL
  })
},

// 所以我們要來設計另外一個可以更新比較多資訊的方法到我們的 cloud firestore
// 額外加入 { merge: true } 選項，可以讓本次上傳的資料是以合併的方式，變成有點像Firebase提供的另外一組 update 方法
F_setManagerData (data) {
  return db.collection('manager').doc(data.displayName).set({
    nickName: data.displayName,
    email: data.email,
    phoneNumber: data.phoneNumber,
    address: data.address,
    skills: data.skills,
    intro: data.intro
  }, { merge: true })
}

透過上面編輯頁，可以順利的更新使用者資訊 ( 有點弱弱的 F_updateProfile 方法 ) 和上傳一筆完整資訊到資料庫，之後呢，我們就會用這筆完整的資訊拿去放在首頁的類似 "關於我" 這樣的頁面中，或者把這組頁面我們可以用來處理比較完整的帳號註冊的部分。

沒事也可以逛逛我們其他團隊成員的文章啦 ~~
eien_zheng: 前端小嘍嘍的Golang學習旅程_The journey of learning Golang 系列
PollyPO技術: 前端設計轉前端工程師-JS踩坑雜記 30 天 系列
阿電: 忍住不打牌位，只要30天VueJS帶你上A牌 系列
喬依司: 實作經典 JavaScript 30 系列