Nuxt.jsでFirebaseのRealtime Databaseにデータを送る方法

2021年7月9日Vue.js

Nuxt.jsでFirebaseのRealtime Databaseにデータを送る方法を紹介します。

Nuxt.jsでFirebaseのRealtime Databaseにデータを送る手順

• componentsにフォームを作成
• pagesのvueファイルに上のフォームを設置してaxiosでHTTP通信
• Firebaseのプロジェクトを作成
• Realtime Databaseを使う

ディレクトリ構造

root
├─ src
   ├─ components
   │   ├─ Admin
   │   │   ├─ AdminPostForm.vue
   ├─ components
   │   ├─ UI
   │   │   ├─ AppButton.vue
   │   │   ├─ AppControlInput.vue
   ├─ pages
   │   ├─ admin
   │   │   ├─ new-post
   │   │   │   ├─ index.vue

componentsにフォームを作成:components/Admin/AdminPostForm.vue

<template>
  <form @submit.prevent="onSave">
    <AppControlInput v-model="editedPost.author">投稿者</AppControlInput>
    
    <AppControlInput v-model="editedPost.title">タイトル</AppControlInput>
            
    <AppControlInput v-model="editedPost.thumbnail">サムネイル</AppControlInput>
            
    <AppControlInput
              control-type="textarea"
              v-model="editedPost.content">コンテンツ</AppControlInput>
            
    <AppButton type="submit">保存</AppButton>
            
    <AppButton
              type="button"
              style="margin-left: 20px"
              btn-style="cancel"
              @click="onCancel">キャンセル</AppButton>
  </form>
</template>

ボタンやインプットコンポーネントは、再利用性の高いボタンやインプットタグの作成方法を参考にしてみてください。

<script>
import AppControlInput from '@/components/UI/AppControlInput'
import AppButton from '@/components/UI/AppButton'
export default {
  components: {
    AppControlInput,
    AppButton,
  },
  props: {
    post: {
      type: Object,
      required: false
    }
  },
  data() {
    return {
      editedPost: this.post
       ? { ...this.post }
       : {
        author: '',
        title: '',
        thumbnail: '',
        content: '',
      }
    }
  },
  methods: {
    onSave() {
      this.$emit('submit', this.editedPost)
    }
  }
}</script>

methodsのonSaveで、submitを第二引数に指定したデータとともにemitします。

フォームを設置するvueファイル：pages/admin/new-post/index.vue

<template>
  <div class="admin-new-post-page">
    <section class="new-post-form">
      <!-- 管理用画面、入力フォーム -->
      <AdminPostForm @submit="onSubmitted" />
    </section>
  </div>
</template>

<script>
import axios from 'axios'
import AdminPostForm from '@/components/Admin/AdminPostForm'

export default {
  components: {
    AdminPostForm
  },
}</script>

templateで上のformを子コンポーネントとして利用します。

axiosのインストール

firebaseとやり取りするので、axiosを使います。

axiosをインストールしていない場合はaxiosはまず以下コマンドでインストールします。

npm install --save axios

フォームに入力されたデータをFirebaseに送る

submitで渡ってくるものを、受け取ります。
onSubmitted()メソッドを作成します。
上のpages/admin/new-post/index.vueにメソッドを追加します。

  methods: {
    // postData === AdminPostFormから送られるeditedPost
    onSubmitted(postData) {
      axios.post('https://[firebaseのurl].app/posts.json', postData)
      .then(result => console.log(result))
      .catch(e => console.log(e))
    }
  }

でーたを追加したいので、axiosのPOSTリクエストを使います。
第一引数には、urlをいれます。
FirebaseのURLは次の部分に記載があります。

Firebaseのプロジェクトの作成方法は、Firebaseの使い方 – プロジェクト作成からVue.jsでデプロイするまでを参考にしてみてください。

URLのあとにnodeとして「posts」としています。自分で決められるので今回は投稿まとめたいのでpostsとしています。
最後に.jsonをつけることでjsonデータとして渡すことができます。
axiosの第二引数には、渡したいデータをいれます。
今回ならpostDataです。
axiosはpromiseを返すので、then()メソッドでつなげます。

あとは、作成したフォームにデータを入力してsubmitを発火させるとデータがfirebaseに送られます。