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

2021年7月10日Vue.js

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

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

• store/index.jsを作成
• axiosでGETリクエスト

FirebaseのRealtime Databaseにpostsというデータがあることを前提に進めます。 Firebaseにデータを送る方法は、Nuxt.jsでFirebaseのRealtime Databaseにデータを送る方法を参考にしてみてください。

ディレクトリ構造

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

store/index.js

import Vuex from 'vuex'
import axios from 'axios'

const createStore = () => {
  return new Vuex.Store({
    state: {
      loadedPosts: []
    },
    mutations: {
      setPosts(state, posts) {
        state.loadedPosts = posts
      }
    },
    actions: {

    },
    getters: {
      loadedPosts(state) {
        return state.loadedPosts
      }
    }
  })
}

export default createStore

axiosを使うので、axiosをインポートします。 そして、actionsでGETリクエストを設定します。

nuxtServerInit()を使う

サーバーでレンダリングしたい場合、nuxtServerInit()を使います。 actionsの部分に次のように追記します。

    actions: {
      nuxtServerInit(vuexContext, context) {

      },
      setPosts(vuexContext, posts) {
        vuexContext.commit("setPosts", posts);
      }
    },

nuxtServerInitに関しては、Nuxt.jsのnuxtServerInitアクションの使い方を参考にしてみてください。

axiosでGETリクエストする

    actions: {
      nuxtServerInit(vuexContext, context) {
        return axios.get('https://[firebaseのurl].app/posts.json')
        .then()
        .catch(e => console.error(e))
      },
      setPosts(vuexContext, posts) {
        vuexContext.commit("setPosts", posts);
      }
    },

axiosの第一引数については、データを送った場所POSTリクエストで使ったurlと同じです。 そして、Promiseなので、then()メソッドでつなげます。

    actions: {
      nuxtServerInit(vuexContext, context) {
        return axios.get('https://[firebaseのurl].app/posts.json')
        .then(res => {
          const postsArray = []
          for (const key in res.data) {
            postsArray.push({ ...res.data[key], id: key })
          }
          vuexContext.commit('setPosts', postsArray)
        })
        .catch(e => console.error(e))
      },
      setPosts(vuexContext, posts) {
        vuexContext.commit("setPosts", posts);
      }
    },

データを格納する配列の変数を定義して、そこにforループで一つ一つデータをpush()メソッドで収めます。 データはオブジェクトで得たいので、スプレッド構文を使って、idを加えたオブジェクトにしています。 keyは、Firebaseが自動生成するidです。