vuefireでFirestoreとbindするときにハマったこと

今回はvuefireでFirestoreをbindするときにすこし手間取ったので、それを共有したいと思います。

まず最初に結論から言うと、いままで存在していた$bindAsArray、$bindAsObject関数は無くなり、$bindに統合されました。

自分の場合は下記のエラーで異変に気づき、どうしても解決できず、[issue](Error($bindAsObject is not a function) occurred · Issue #156 · vuejs/vuefire : https://github.com/vuejs/vuefire/issues/156)立てたら教えてくれました。

TypeError: _this.$bindAsObject is not a function

You don't need to specify anymore if it's a collection or a document 🙂 , so it's just $bind: https://github.com/vuejs/vuefire/blob/firestore/examples/index.html#L113

examplesをみてれば一発だったようです（READMEに書いて・・）。

さて、ここからは簡単なfirestore x vuefire導入編です。

使い方

vuefire@nextをインストールします

$ npm install vuefire@next --save

$bind関数でFirestoreのデータと紐付けます

this.$bind('loginUser', firestore.collection('users').doc(userId))

そもそもですが、上記の例のuserIdのように変数を使わないのであれば、シンプルに下記のように記述するのが良いと思います。

new Vue({
  data: {
    todos: [],
    currentTodo: null
  },
  firestore: {
    todos: db.collection('todos'),
    currentTodo: db.collection('todos').doc('1')
  }
})

参考リンク

• Firestore Roadmap · Issue #145 · vuejs/vuefire
• vuejs/vuefire at firestore
• Error($bindAsObject is not a function) occurred · Issue #156 · vuejs/vuefire