前言

在前面幾天的時候，因為還是想要直接能串資料庫，所以將主題切出去學習一下 Firestore，今天就要來將 Firestore 導入 Vue 專案了，一邊實驗一邊記錄下來。

Step.1 安裝套件

先輸入以下指令安裝：

yarn add firebase

若是使用 npm 的朋友請用：

npm install firebase

這邊安裝的 Firebase 版本是 7.0.0。

Step.2 導入 Vuex store

在 Vue 的專案下，我使用 Vuex store 統一管理畫面共用狀態與資料，所以與資料庫有關的內容，也一併放在 store 底下。

首先要先初始化出一個 Firestore instance，這邊在 store 這個資料夾底下，建一個新檔案叫做 db.js，並填入以下的內容：

import firebase from 'firebase/app'
import 'firebase/firestore'

// Get a Firestore instance

const firebaseConfig = {
  apiKey: '### FIREBASE API KEY ###',
  authDomain: '### FIREBASE AUTH DOMAIN ###',
  databaseURL: '### DATABASE DOMAIN ###',
  projectId: '### CLOUD FIRESTORE PROJECT ID ###',
  appId: '### APP PROJECT ID ###'
}

export const db = firebase.initializeApp(firebaseConfig).firestore()

有沒有覺得很熟悉，這就是前幾天在這篇文章提到的設定，要特別注意的是這邊有一些 key 相關的資料，記得要另外將值寫在 .env 檔另外保存，或者像我這邊偷懶先在 .gitignore 拿掉 db.js。總之就是不要將 key 相關的資訊開開心心的 commit 上去囉。

Step.3 在 store 測試讀取 Firestore 資料

這邊，我先在 Firestore 中手動建了三筆假資料：

再來就可以實際到 store 裡打 API 拿資料了，寫法如下（原始碼位置）：

import { db } from '../db'

export const state = () => ({
  expenseData: []
})

export const mutations = {
  SET_EXPENSE_DATA(state, expenseData) {
    state.expenseData = expenseData
  }
}

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

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

首先，一開始先引入第二步中的 Firestore instance，再來在 action 的地方，寫一個拿支出紀錄的 action —— getExpenseData，裡面利用 db.collection('expense').get() 這個寫法，拿到 Firestore 中在 expense 集合下的所有文件資料，並得到一個陣列。

處理後利用 mutation 將資料設定到 state 中即可。

Step. 4 確認資料

接下來再到支出紀錄清單頁面上，在 mounted 時發出 action：

mounted() {
  this.isLoading = true
  this.$store.dispatch('billing/getExpenseData').then(() => {
    this.isLoading = false
  })
}

再到畫面上確認：

可以透過 dev tool 看到有拿到資料並且也正確顯示在畫面上，於是就能確定有成功將 Firestore 串到 Vuex store 中啦！

Vuefire & Vuexfire

另外提一下這兩個套件。原本一開始在試著把 Firestore 導入 Vue 專案時，以為需要用 Vuefire 或 Vuexfire 這兩個套件。

但仔細看了文件後，發現這個套件的用途在於簡化「 即時同步 Firestore 資料到 Vue 或 Vuex store 」的寫法。

換句話說，它幫忙把「即時同步的讀取」這個寫法簡化了，若只是要「一般讀取」及其他的「寫入」操作，這些都還是要用原生的寫法。

像我這邊，只是單純把 Firestore 當成一個放資料的地方，每次有需要時會再跟資料庫要資料，那根據文件說法，只要用原生的寫法就好，完全不需要用 Vuexfire。

會需要用到能即時監聽資料變化的情境，聽起來像是聊天、遊戲對戰、推播通知這些像是 socket 在做的事，不過這也很合理，因為 Firebase 本來主要就是提供給 APP 或 WebAPP 來使用。

小結

今天順利地將 Vue 導入前幾天研究了一番的 Firestore，莫名有一點點成就感。今天先到這，我們明天見！

後記

從今天的實作中能體會到搞全端真不容易，況且這還只是用現成的 Firebase 的服務，若是從零架起來還要花更多工。

但仍然覺得身為一個前端工程師，盡可能地去學習一些後端相關的知識還是蠻重要的，尤其最近在新工作中特別有感，常常後端工程師們思緒飛快的在討論新功能的資料結構要怎麼設計時，有時候聽的一知半解也是蠻不踏實的，若能補齊這一塊知識或許可以成為更好用的前端工程師吧！