muraveです。ごぶさたしております。
Nuxt.jsとかVue.jsの小ネタをまとめて書こうと思ったのですが、これは分けておいたほうがいいかな?と思ったので先に書いておきます。
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年以上経過しての気づきでした(;´Д`)