記帳程式 (20)：支出紀錄的新增、修改、刪除 feat. Firestore

第 11 屆 iThome 鐵人賽

DAY 20

Modern Web

從零開始的個人化記帳程式開發系列第 20 篇

11th鐵人賽 vue firestore

ckchuang

團隊Wow Doge!

2019-10-06 19:08:36

3044 瀏覽

分享至

熟悉的標題，最對味。不加一下天數都快忘了自己寫到哪一天了。

昨天成功將 Firestore 引入原本的記帳程式後，今天要回頭繼續把前面因為沒有 API 還沒搞定的支出紀錄做完，這兩天透過基本的 CRUD 實際操作 Firestore 練習。

新增

在 store 底下加一個 addExpense 的 action：

addExpense({ dispatch }, expenseObj) {
  return new Promise((resolve, reject) => {
    db.collection('expense')
      .add({ ...expenseObj })
      .then(() => {
        dispatch('getExpenseData')
        resolve()
      })
      .catch(error => reject(error))
  })
},

新增的寫法比較單純，就是利用 db.collection('expense').add() 來在 Firestore 中，新增一個文件。

至於這邊更新的寫法較偷懶，直接再打一次拿資料的 API 而已。比較好的寫法應該還是要新增後取得新增文件亂數產生的 ID，並將原本傳過來的新資料 expenseObj 用 mutation 塞到 state 中，減少一次的 request。

實際操作後可以到畫面上測試：

從上面可以看到操作後，支出列表成功新增了一筆支出紀錄，再到 Firestore 確認的確有寫入資料庫：

第一步成功地記錄了一筆 美國 Prime 衫河農場濕式熟成 45 天叻眼牛排 12oz 的支出紀錄呢！

編輯

編輯就稍微複雜一點，需要在原本支出列表的每一列中都紀錄有 Firestore 文件的 ID，所以先修改原本取得資料的 action：

getExpenseData({ commit }) {
  return new Promise((resolve, reject) => {
    db.collection('expense')
      .get()
      .then(querySnapshot => {
        const documents = querySnapshot.docs.map(doc => {
          return {
            ...doc.data(),
            id: doc.id
          }
        })
        commit('SET_EXPENSE_DATA', documents)
        resolve()
      })
      .catch(error => reject(error))
  })
},

上面這邊可以注意到在整理資料時，從 querySnapshot.docs 這個陣列中可以取得每一個文件的 ID，這邊也一併塞在整個支出陣列資料的每個物件中。

取得 ID 後，要做編輯這個動作就相對單純了，一樣是加上一個 action，並將其中 Firestore 的操作改為 db.collection('expense').doc(id).update({...expenseObj}) 即可。

一樣分別在畫面上測試一下，並到 Firestore 確認是否有成功更新：

刪除

刪除可以說是裡面最簡單的，因為前面也準備好 ID 了，所以就是刪掉特定 ID 的文件即可：

deleteExpense({ dispatch }, id) {
  return new Promise((resolve, reject) => {
    db.collection('expense')
      .doc(id)
      .delete()
      .then(() => {
        dispatch('getExpenseData')
        resolve()
      })
      .catch(error => reject(error))
  })
}

一樣分別在畫面上測試一下，並到 Firestore 確認是否有成功更新：