Vue.js × Firestore まとめ
Vue.jsのFirebaseの初期化
まずは、src/firebase.jsというファイルを用意して、
Firebaseの初期化するコードを記述していきます。
import firebase from "firebase/app";
var firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: ""
}
firebase.initializeApp(firebaseConfig);
Firestoreデータ取得
userというコレクションからデータを取得する想定。
get()メソッドで全件のデータを取得します。
<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のデータを取得します。
<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()メソッドでデータを追加します。
<script>
import firebase from "firebase/app";
import "firebase/firestore";
export default {
methods: {
addData: function () {
firebase.firestore().collection('user').add({
email: "[email protected]",
username: "test"
})
}
}
};
</script>
Firestoreデータ更新
userというコレクションのデータを更新する想定。
doc()メソッドとset()メソッドで指定したドキュメントIDのデータを更新します。
<script>
import firebase from "firebase/app";
import "firebase/firestore";
export default {
methods: {
updateData: function () {
firebase.firestore().collection('user').doc("documentID").set({
email: "[email protected]",
username: "test_update"
})
}
}
};
</script>
Firestoreデータ削除
userというコレクションのデータを削除する想定。
doc()メソッドとdelete()メソッドで指定したドキュメントIDのデータを削除します。
<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をしていただければ嬉しいです!
フォローも是非お願い致します(^^)
Author And Source
この問題について(Vue.js × Firestore まとめ), 我々は、より多くの情報をここで見つけました https://qiita.com/engineerhikaru/items/af2e6984b99e2130e96d著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .