【Vue】Vuexで他のモジュールのActionをDispatchする

Vuexで他のモジュールのAction, Mutationを操作

ある程度の規模のアプリケーションではVuexはモジュールに分けて、複数で管理すると思います。

その際、あるモジュールから他のモジュールのメソッド(action, mutation)を呼び出したい場合がよくあります。Reactでは他のモジュールをimportして呼び出せばよかったですが、Vueではどのように書くのか知らなかったので残しておきます。

例えば、あるモジュールから’othermodule’というモジュールの’someAction’というアクションを呼び出したい場合は下のように書きます。

dispatch('othermodule/someAction', payload, {root: true} )

ここで {root: true} としていることがポイントです。これを指定しないと、今いるモジュール内から呼び出そうとしてしまいます。

{root: true}を指定することで、’othermodule/someAction’のような形でモジュールツリーのルートからアクションを指定することができるため、他のモジュールのアクションを呼び出すことができます。

ちなみに、他のmutationを呼び出すこともでき、その場合は同様に下のように書きます。

commit('othermodule/someMutation', payload, {root: true} )

ReactとVueで微妙に書き方の違うところですね。