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

Vue.js

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

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

  1. pagesのコンポーネントにstoreのactionsにアクセスするメソッドを作成
  2. storeのmutationsにstateにaddするためのmutationを作成
  3. storeのactionsにデータへ追加するためのactionを作成

pagesのコンポーネントにstoreのactionsにアクセスするメソッドを作成

<Form @submit="onSubmitted" />

templateで入力そ送信できるフォームのあるコンポーネントにメソッドを作成します。
再利用性の高いフォームの作成方法は、Vue.jsで再利用性の高いボタンやインプットタグを作成する方法を参考にしてみてください。

  methods: {
    onSubmitted(postData) {      
      this.$store.dispatch('addPost', postData)
      // addPostのaxiosをreturnしてpromiseにしているのでthen()でつなげられる
      .then(() => {
        this.$router.push('/admin')
      })
    }
  }

scriptで、actionsにアクセスするため、addPostというactionをpostDataというデータとともにdispatchします。
その後、then()メソッドで飛ばしたいページにrouterを指定してpushで飛ばします。

storeのmutationsにstateにaddするためのmutationを作成

    mutations: {
      // データを追加
      addPost(state, post) {
        state.loadedPosts.push(post)
      },
    },

postというデータを受け取って、それを配列にpushで追加します。

storeのactionsにデータへ追加するためのactionを作成

    actions: {
      addPost(vuexContext, post) {
        const createdPost = {
          ...post,
          updatedDate: new Date()
        }
        return axios.post('https://[firebaseのrul].app/posts.json', createdPost)
        .then(res => {
          vuexContext.commit('addPost', {...createdPost, id: res.data.name})
          this.$route.push('/admin')
        })
        .catch(e => console.log(e))
      },

まず、追加したい変数に、他にさらに加えたい更新日などの情報があれば、変数を用意して格納します。
上ではスプレッド構文で一度ばらしてから、updatedDateという日付を加えてオブジェクトに戻しています。

axiosをreturnすることで、promizeが返されるので、上のpagesのコンポーネントでもthen()メソッドが使えるようになります。
axiosのpostのあとは、then()メソッドでcommitして、mutationsにつなげます。そのとき、idを格納していると便利です。

Vue.js

Posted by devsakaso