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で微妙に書き方の違うところですね。
コメント