Vuefireとは

firebaseとVue.jsを使ったアプリケーションを作っていて、vuefireがどうして必要なのかわからなかったので調べてみました。

vuefireとは

firebaseのリモートデータベースとローカルの状況を用意に一致させるためのツールのことを言います。

firebaseはバックエンド部分を圧倒的に効率化できるサービスですが、そのデータベースとローカルの状況をリアルタイムに同期させるのは多くの工夫が必要となります。
そこで、vuefireを使うと、多くのことを考えることなく、同期作業を行うことができます。

どうやってやるのか

まず、npmを使ってvuefireをインストールします。

npm install firebase vuefire@next

注意するのは、 vuefire ではなくて vuefire@next をインストールすることです。
さらに、これまでは --save で保存することが必要ですが、 npm5.0からは必要なくなったとのことです。
https://qiita.com/havveFn/items/c5beda8572aa8c1e6be6

さらに、vuefireから firestorePlugin をインポートします。

import { firestorePlugin } from 'vuefire'
Vue.use(firestorePlugin)

これは、firestoreを使う場合は firestorePlugin を、Realtime Databaseを使う場合は rtdbPlugin をインポートするとのことです。

また、 Vue.use(plugin) で、pluginを有効化することができます。

そしてvue内でデータベースのインスタンスを作成します。

export const db = firebase.firestore

これでvue内でデータベースを触ることができるようになり、vuefireが使えるようになりました。