【Nuxt.js・Firebase】firestoreからIDをもとにデータを取得する

はじめに

こんにちは。
こちらの記事では、firestoreからIDをもとにデータの取得を行う方法を記しています。
誤っている点がございましたらコメントいただけると幸いです。

やりたいこと

Cloud Firestore に登録されたデータを、自動生成されるIDをもとに取得して画面に描画させたい。

実装

クリックイベントで、firestoreからIDをもとにデータを取得する処理を記述している。

template

<template>
  <p>{{ content }}</p>
  <button @click="show">データを表示</button>
</template>

script

<script>
export default {
  data: function () {
    return {
      content: ""
    }
  },
  methods: {
    async show(){
      const uid = this.$store.getters.user.uid;
      const doc = await this.$firestore.collection("contents").doc(uid).get();
      const data = doc.data();
      this.content = data.contents;
    }
  }
}

• store/index.jsで、gettersにIDをセットして呼び出しています。
• plugins/firebase.jsで、firestoreをinjectしているので、this.$firestoreで呼び出せるようにしている。（injectについては、下記の記事で紹介しています。）
• 取得したデータを、dataプロパティのcontentにセットして描画しています。

おわりに

ここまでfirestoreからIDをもとにデータの取得する方法についてまとめました。
かなり簡単に描いたので、firestoreの詳しい記事に関しては学習を進めながらアウトプットしていきます。

以上、最後まで読んでいただきありがとうございました！
よければLGTMを押してくれると嬉しいです！