この記事は、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>