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

未経験、異業種からIT業界に転身。フロントエンジニア。主にJavascript(React.js)をつかったWEBアプリ開発にたずさわる。
お仕事のご依頼はこちらから → genpsp10@gmail.com

psp7をフォロー
プログラミング
スポンサーリンク
psp7をフォロー
ハトらぼ

コメント