Firebaseは、ホストされたリアルタイムデータベースを設定するための最も簡単な方法の1つです。 VueFire は、Vueの反応性システムを介してFirebaseオブジェクトに直接マッピングと更新を提供することで、作業をさらに簡単にします。 組み合わせると、結果は素晴らしくシンプルで明確です。

使用法

NPMまたはYarnを使用して、Vue.jsプロジェクトにfirebaseおよびvuefireをインストールします。

  1. yarn add firebase vuefire
  1. 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ドキュメントにあります。