Nuxt.jsでFirebaseのRealtime Databaseにデータを編集して保存する方法

Vue.js

Nuxt.jsでFirebaseのRealtime Databaseにデータを編集して保存する方法を紹介します。

Nuxt.jsでFirebaseのRealtime Databaseにデータを編集して保存する手順

  1. pagesのコンポーネントでasyncDataにデータのIDを追加
  2. pagesのコンポーネントにstoreのactionsにアクセスするメソッドを作成
  3. storeのmutationsにstateにedit/updateするためのmutationを作成
  4. storeのactionsにデータへ更新するためのactionを作成

pagesのコンポーネントでasyncDataにデータのIDを追加

  asyncData(context) {
    return axios.get(`https://[firebaseのurl].app/posts/${context.params.postId}.json`)
    .then(res => {
      // console.log('admin', res.data);
      // データベースにアクセスするときにidが必要なので下のように追記
      return {loadedPost: {...res.data, id: context.params.postId}}
    })
    .catch(e => context.error(e))
  },

編集する場合、もともとのデータのIDが必要になります。
そのIDを取得するために、asyncDataで、データを取得する段階で、IDを追加しておきます。
上のケースでは、axiosでgetリクエストしたあと、then()メソッドのレスポンスのdataをスプレッド構文で分解してから、idを組み込んでオブジェクトにしています。

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

  methods: {
    // editedPostはAdminPostFormからくる
    onSubmitted(editedPost) {
      this.$store.dispatch('editPost', editedPost)
      .then(() => {
        this.$router.push('/admin')
      })
    }

dispatchでactionsのeditPostにアクセスしています。
そのとき、editedPostというデータを渡しますが、上のasyncDataでidを格納しているので、データベースにアクセスする際にそのIDを使うことができます。

storeのmutationsにstateにedit/updateするためのmutationを作成

    mutations: {
      // データを更新
      editPost(state, editedPost) {
        const postIndex = state.loadedPosts.findIndex(post => post.id === editedPost.id)
        state.loadedPosts[postIndex] = editedPost
      },
    },

データの更新をするために、findIndex（）メソッドを使って、idと一致するもののインデックス番号を取得します。
findIndex（）メソッドについては、find()とfindIndex()メソッドの使い方を参考にしてみてください。
それを変数に格納して、配列のそのインデックス番号のものを更新します。

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

    actions: {
      // データの更新
      editPost(vuexContext, editedPost) {
        // データの更新をしたいのでPUTリクエストを使用
        // idにはeditedPostのidでアクセスできる
        return axios.put(`https://[firebaseのurl].app/posts/${editedPost.id}.json`, editedPost)
        .then(res => {
          console.log('id',editedPost.id);
          vuexContext.commit('editPost', editedPost)
        })
        .catch(e => console.log(e))
      }
    },

ここで、asyncData()で格納したidがあるのでアクセスできます。

Vue.js

Posted by devsakaso