Nuxt × Firebaseでデータベース（firestore）を扱う

この記事は、Nuxt+firebase環境が用意されている前提の記事です。まだの方は以下の記事で、Nuxt+firebase環境を用意してください。

「Nuxt.js × FirebaseでPWAアプリを公開する」

Vuex・firebaseをインストール

プロジェクトディレクトリに移動し、以下のコマンドを実行

vuexインストール

$ npm install vuex --save

firebaseインストール

$ npm i -S firebase

各種ファイルで接続の設定を記述していく

~/plugins/firebase.js

import firebase from 'firebase'
import 'firebase/firestore'
import config from './../util/firebaseConfig'

const firebaseApp = firebase.initializeApp(config)
const settings = { timestampsInSnapshots: true }
const firestore = firebaseApp.firestore()
firestore.settings(settings)

export default (!firebase.apps.length ? firebase.app() : firestore)

~/store/index.js

import db from '~/plugins/firebase'
// testテーブルに接続（接続したテーブル名に変更）
const itemRef = db.collection('test')
export const INIT = 'INIT'
const initPlugin = store => store.dispatch(INIT)

const store = () =>
  new Vuex.Store({
      state: {
          itemList: []
      },
      mutations: {
          INIT(state, data) {
              state.itemList = data
          }
      },
      actions: {
          // 全件取得
          INIT({ commit }) {
              itemRef.get().then(res => {
                  let list = []
                  res.forEach(doc => {
                      let data = {
  　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　id: doc.id,
                          name: doc.data().name,
                      }
                      list.push(data)
                  })
                  commit('INIT', list)
              })
          }
      },
      getters: {
          getItems: state => {
              return state.itemList
          }
      },
      plugins: [initPlugin]
  })

export default store

~/util/firebaseConfig.js

以下に、firebaseプロジェクト情報のスクリプトを埋め込みます。

export default {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: ""
}

~/firebase.json

// Firebaseで使うサービスを定義
// 各ファイル参照
{
"hosting": {
  "public": "dist",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ]
},
"firestore": {
  "rules": "firestore.rules",
  "indexes": "firestore.indexes.json"
},
"storage": {
  "rules": "storage.rules"
}
}

~/firestore.indexes.json

{
  "indexes": []
}

~/firestore.rules

service cloud.firestore {
match /databases/{database}/documents {
  match /{document=**} {
    allow read, write;
  }
}
}

~/storage.rules

service firebase.storage {
match /b/{bucket}/o {
  match /{allPaths=**} {
    allow read, write: if request.auth!=null;
  }
}
}

以上で接続完了です。

あとは、以下のようにテンプレート側で取得したデータを表示させるコードを書いていけばOKです。

~/pages/index.vue

<template>
<ul v-for="(item,index) in init" :key="index">
　　　　　　　<li>{{ item.name }}：{{ item.name }}</li>
</ul>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
      computed: {
          ...mapGetters({
              init: 'getItems'
          })
      }
  }
</script>