Vue.js × Firestore まとめ

Vue.jsのFirebaseの初期化

まずは、src/firebase.jsというファイルを用意して、
Firebaseの初期化するコードを記述していきます。

firebase.js

import firebase from "firebase/app";
var firebaseConfig = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: ""
}
firebase.initializeApp(firebaseConfig);

Firestoreデータ取得

userというコレクションからデータを取得する想定。
get()メソッドで全件のデータを取得します。

App.vue

<template>
  <div id="app">
    <ul>
      <li v-for="email in emails" v-bind:key="email">{{ email }}</li>
    </ul>
  </div>
</template>
<script>
import firebase from "firebase/app";
import "firebase/firestore";
export default {
  data(){
    return {
      emails: []
    }
  },
  created() {
    firebase.firestore().collection('user').get().then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
        this.emails.push(doc.data().email)
      })
    })
  }
};
</script>

Firestoreデータ取得(ドキュメントID指定)

userというコレクションからデータを取得する想定。
doc()メソッドとget()メソッドで指定したドキュメントIDのデータを取得します。

App.vue

<template>
  <div id="app">
    <p>{{ email }}</p>
  </div>
</template>
<script>
import firebase from "firebase/app";
import "firebase/firestore";
export default {
  data(){
    return {
      email: ''
    }
  },
  created() {
    firebase.firestore().collection('user').doc('documentID').get().then((doc) => {
      this.email = doc.data().email
    })
  }
};
</script>

Firestoreデータ追加

userというコレクションにデータを追加する想定。
add()メソッドでデータを追加します。

App.vue

<script>
import firebase from "firebase/app";
import "firebase/firestore";
export default {
  methods: {
    addData: function () {
      firebase.firestore().collection('user').add({
        email: "[e-mail]",
        username: "test"
      })
    }
  }
};
</script>

Firestoreデータ更新

userというコレクションのデータを更新する想定。
doc()メソッドとset()メソッドで指定したドキュメントIDのデータを更新します。

App.vue

<script>
import firebase from "firebase/app";
import "firebase/firestore";
export default {
  methods: {
    updateData: function () {
      firebase.firestore().collection('user').doc("documentID").set({
        email: "[e-mail]",
        username: "test_update"
      })
    }
  }
};
</script>

Firestoreデータ削除

userというコレクションのデータを削除する想定。
doc()メソッドとdelete()メソッドで指定したドキュメントIDのデータを削除します。

App.vue

<script>
import firebase from "firebase/app";
import "firebase/firestore";
export default {
  methods: {
    delete: function () {
      firebase.firestore().collection('user').doc("documentID").delete().then(() => {
        alert('削除');
      })
    }
  }
};
</script>

まとめ

この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)