user icon

Vuexのモジュールから他のモジュールのメソッドを呼ぶには

muraveです。ごぶさたしております。

Nuxt.jsとかVue.jsの小ネタをまとめて書こうと思ったのですが、これは分けておいたほうがいいかな?と思ったので先に書いておきます。

Vuexのモジュールによる名前空間は処理を分割管理するのに便利です。

モジュール | Vuex

ですが、他のモジュールのメソッド(action, mutation)を呼ぶことができない(と思っていた)ので、不便に感じつつルートであるindex.jsに共通処理を集めたりなどしていました。が、先日、呼び出し方法に気づきました。

前掲のモジュールのドキュメントにあるように名前空間内で普通にdispatchやcommitを使うと同一名前空間のaction、 mutationが実行されます。

rootオプションがあり、これを渡すことでルートのものを呼ぶこともできます。

ドキュメントのサンプルコードから抜粋して引用します。

modules: {
  foo: {
    namespaced: true,

    actions: {
      // ディスパッチとコミットもこのモジュール用にローカライズされています
      // ルートディスパッチ/コミットの `root` オプションを受け入れます
      someAction ({ dispatch, commit, getters, rootGetters }) {
        dispatch('someOtherAction') // -> 'foo/someOtherAction'
        dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'

        commit('someMutation') // -> 'foo/someMutation'
        commit('someMutation', null, { root: true }) // -> 'someMutation'
      },
    }
  }
}

私はこのサンプルを見て、モジュールからは同一名前空間内か「ルートのみにアクセス」可能と思いこんだのですが…

そう、「ルートからのアクセス」が可能なのです。他のモジュール(例えばbar)から前記のfoo内のsomeActionを呼ぶ場合、次のように書けばよかったのです。

modules: {
  bar: {
    namespaced: true,

    actions: {
      someAction ({ dispatch, commit, getters, rootGetters }) {
        dispatch('foo/someOtherAction', null, { root: true }) // -> 'foo/someOtherAction'
      },
    }
  }
}

Vuexを使い始めて1年以上経過しての気づきでした(;´Д`)

Facebooktwitterlinkedintumblrmail

タグ: ,

名前
E-mail
URL
コメント

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)