Vue.jsFirebaseとVueFireの統合
提供:Dev Guides
Firebaseは、ホストされたリアルタイムデータベースを設定するための最も簡単な方法の1つです。 VueFire は、Vueの反応性システムを介してFirebaseオブジェクトに直接マッピングと更新を提供することで、作業をさらに簡単にします。 組み合わせると、結果は素晴らしくシンプルで明確です。
使用法
NPMまたはYarnを介して、Vue.jsプロジェクトにfirebase
およびvuefire
をインストールします。
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ドキュメントにあります。