Nuxt.jsの基礎勉強-firebaseと連携したToDoアプリ1-

firebase Nuxt.js Vue.js

はじめに

今回はグーグルが運営しているデータベースであるfirebaseとNuxt.jsのアプリケーションを連携させることを勉強した。 長くなると思うので記事を2つに分けて投稿します。

firebaseの環境設定

firebaseでプロジェクトを作成

  • firebaseでアカウント登録をしてCloud Firestore のデータベースをテストモードでプロジェクトを作成する。
  • 設定からプロジェクトIDを取得する。

firebaseとvuexfireと@nuxtjs/dotenvをインストール

$ npm install --save firebase
$ npm install --save vuexfire
$ npm install --save @nuxtjs/dotenv
  • 上記をインスコしたらpackage.jsonを開いてdependenciesに上記全部が記述されていることを確認する。

~/plugins/firebase.jsにfirebaseをimportする

import firebase from 'firebase'

const config ={
    projectId: process.env.FIREBASE_PROJECT_ID
}

if(!firebase.apps.length){
    firebase.initializeApp(config)
}

export default firebase

@nuxtjs/dotenvを利用して環境変数を使用する

  • @nuxtjs/dotenvを有効化するためにnuxt.config.jsのmodules部分に以下を記述
  /*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/dotenv'
  ],
  • ~/.envを作成
FIREBASE_PROJECT_ID = 'Your firebase project id'
  • ~/.gitignoreにて~/.envを記述
.env

storeの設計

vuexfireの設定

  • vuexfire#usageにも記述されているがvuexfireは~/store/index.jsにてmutationsを作る必要があるので~/store/index.jsに以下を記述
import { vuexfireMutations } from 'vuexfire'

export const mutations = {
    ...vuexfireMutations
}

todos.jsにてfirebaseとvuexfireを取得して使う

  • pluginからfirebaseをimport
  • 同じくvuexfireもimport
  • firebaseをdbに格納 (今回はfirestoreを用いたからこの綴りになる)
  • 初期化したfirebaseにvuex内のデータであるtodosを格納
  • firebaseに渡す値todosを定義
  • vuexfireのusageにもある通りにActionを記述
  • init:でfirebaseを初期化
  • add:で入力値がある場合にtodosRefに夫々の値を格納している
import firebase from '~/plugins/firebase'
import { firestoreAction } from 'vuexfire'

const db = firebase.firestore()
const todosRef = db.collection('todos')

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

export const actions = {
    init: firestoreAction(({bindFirestoreRef}) => {
        bindFirestoreRef('todos', todosRef)
    }),
    add: firestoreAction((context, name) => {
        if(name.trim()){
            todosRef.add({
                name: name,
                done: false,
                created: firebase.firestore.FieldValue.serverTimestamp()
            })
        }
    }),
          (以下略)

~/page/todos.vueに入力フォームの作成

textareaのフォームを作成して、submitを用いてデータの送信をサーバーに送る機能を作成。

  • template部分の記述
<template>
  <div class="form">
    <form v-on:submit.prevent="add">
      <input v-model="name">
      <button>Add</button>
    </form>
  </div>
</template>
  • script部分の記述
export default {
    data: function(){
        return {
            name: '',
            done: false
        }
    },
    created: function(){
        this.$store.dispatch('todos/init')
    },
    methods: {
        add(){
            this.$store.dispatch('todos/add', this.name)
            this.name = ''
        },

終わりに

抜けが無ければ上記まででfirebaseに入力したテキストデータとサーバーのタイムスタンプとfalseの値を投げるプログラムになる。

このコードは写経しながら書いたコードだったが後から読みながら公式ドキュメントを追ったりすることで、書いたコードの意味や作業の確認ができてよかったと思う。

次回はこのプログラムの続きを上げていきます。