Firebaseは、ホストされたリアルタイムデータベースを設定するための最も簡単な方法の1つです。 VueFire は、Vueの反応性システムを介してFirebaseオブジェクトに直接マッピングと更新を提供することで、作業をさらに簡単にします。 組み合わせると、結果は素晴らしくシンプルで明確です。
使用法
インストール firebase
と vuefire
Vue.jsプロジェクトで、NPMまたはYarnを介して。
- yarn add firebase vuefire
- npm install firebase vuefire --save
次に、アプリのメインファイルで、VueFireプラグインを有効にします。
main.js
import './firebase';
import Vue from 'vue';
import VueFire from 'vuefire';
import App from 'App.vue';
Vue.use(VueFire);
new Vue({
el: '#app',
render: h => h(App)
});
また、Firebase接続を開始する必要があります。 と呼ばれる新しいファイルを作成します firebase.js
.
firebase.js
import Firebase from 'firebase'
const firebaseApp = Firebase.initializeApp({
// Populate your firebase configuration data here.
...
});
// Export the database for components to use.
// If you want to get fancy, use mixins or provide / inject to avoid redundant imports.
export const db = firebaseApp.database();
これで、FirebaseデータベースのデータにVueコンポーネントから直接アクセスできるようになりました。
App.vue
<template>
<p v-for="user of users">
{{user.name}}
</p>
</template>
<script>
import {db} from './firebase';
export default {
data() {
return {
users: {}
}
},
firebase: {
users: {
source: db.ref('users'),
// Optional, allows you to handle any errors.
cancelCallback(err) {
console.error(err);
}
}
}
}
</script>
ユーザーコレクションが更新されるたびに、ユーザーデータオブジェクトもクライアントで更新されます。 シームレスなリアクティブデータベースの場合はどうですか?
データの変更
で通常どおり配列を変更できます this.$firebaseRefs
. (すなわち。 this.$firebaseRefs.users.push({name: 'Tom Bombadil'})
). 通常のVue反応性ルールと警告が適用されます。
残念ながら、オブジェクトの変更は少し難しい場合があります。 これは、firebaserefを直接使用してかなり手動で行う必要があります。
updateUserName(user, newName) {
this.$firebaseRefs.users.child(user['.key']).child('name').set(newName);
}
removeUser(user) {
this.$firebaseRefs.users.child(user['.key']).remove()
}
詳細とドキュメントは、VueFireリポジトリとFirebaseドキュメントにあります。