VuexBlaze
VuexFireのDXのどこが悪いのか？
（1）Vuexのプラグイン機能を使っていない
VuexFireを使うにはルートのStoreに以下のようにMutationを追加する必要があります。
export default new Vuex.Store({
mutations: {
...firebaseMutations
}
})
これと同等のことは、Vuexのプラグイン機能を使えば可能です。
VuexFireのドキュメントを見るとちゃんと「ルートのStoreだけにfirebaseMutationsを設定せよ」と書いてあるのですが、コードだけを見ると、FirestoreをバインドさせたいすべてのStoreに設定しなければいけないのかな？と思ってしまいます。
実際モジュールのStoreのみにfirebaseMutationsを設定してハマっている人を見ました。
このように不要にライブラリの内部構造をさらけ出すようなコードを書かせるのはあまりよくないと思います。
（2）バインドのためのコードが冗長
ただ単純にtodosコレクションをnameでソートしてtodosステートにバインドさせるだけなのに、アクションにこんな冗長なコードを書く必要があります。
actions: {
bindTodos: firebaseAction(({ bindFirebaseRef }) => {
bindFirebaseRef('todos', todosRef.orderBy('name'))
})
VuexBlazeでは？
VuexBlazeのセットアップを含めたコードは以下のようになります。
※ firebaseのセットアップについては省略しています。
import { vuexblazePlugin, collection } from 'vuexblaze'
// .... firebaseのセットアップ
const firestore = firebase.firestore()
export default new Vuex.Store({
plugins: [vuexblazePlugin.config({ firestore })],
state: {
todos: []
},
actions: {
...collection('todos').orderBy('name').bind()
}
})
// Vueインスタンス側
mounted() {
this.$store.dispatch('bindTodos')
}
vuexblazePluginにfirestoreオブジェクトを渡していますが、Nuxtを使っていてかつNuxt-Fireでfirebaseをセットアップしている場合は、単に以下のようにすればOKです。
export const plugins = [vuexblazePlugin]
もちろんorderBy以外のクエリにも対応しています。
...collection('todos')
.orderBy('name')
.where('done', '==', true)
.limit(10)
.bind()
todosステート以外にバインドさせたい場合は、bindToを使います
...collection('todos')
.where('isUrgent', '==', true)
.bindTo('urgentTodos')
// Vueインスタンス側
this.$store.dispatch('bindUrgentTodos')
クエリを動的にしたい場合はfilterを使います。
...collection('todos')
.filter(({ query, state, rootState, getters, rootGetters }) => {
query
.where('done', '==', state.search.done)
.orderBy('name')
.limit(state.search.limit)
})
.bindTo('searchedTodos')
// Vueインスタンス側で再読込
this.$store.dispatch('reloadSearchedTodos')
VuexBlazeの詳細
とりあえずは、githubのREADMEや、Vue Example、Nuxt Example を見てください。
バグは…あると思います。今の所ホットリロードしたときに変な動きをすることがあるのを確認しています。
質問など
質問やバグ報告など大歓迎です。使い方が分からないとか、そもそもVue、Vuexが分からないとかそんなものでも結構なのでどしどしください。
githubのIssueは英語で運用したいと思っているので、英語が苦手な方はTwitterで質問頂けるとうれしいです。