VuexBlaze

github
npm

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で質問頂けるとうれしいです。

VuexFireのDXが悪いのでVuexBlazeというライブラリを作ってみた