Vuexで異モジュール同mutation名を機能させたい


#1

こんにちは。Vuexに関する質問です。

質問

Vuexのモジュール機能を使い、親子関係があるステートを作成します。
それぞれが同じ名前のmutationsを持っているとき、commit(“mutaion名”)をすると、親子両方のmutationsが発火されてしまいます。
この原因と解決方法をお聞きしたいです。

実装

以下で、rootButton+を押してもaButton+を押しても、両方の数値がインクリされてしまいます。(consoleにもログを出すようにしています)

親(root)のステートはApp.vue、子(modulea)のステートはcomponents/HelloWorld.vueで使用しており、それぞれのButtonのonclickでそれぞれのcommitを使っているつもりなのですが、うまくいっていません。

背景

単一ファイルコンポーネントを使ってアプリケーションを構築しているのですが、コンポーネントネストが深くなってきてステート管理がきつくなってきたため、Vuexを使おうと息巻いているということです。


#2

モジュールで
namespaced: true
を指定されてますか?
すると
actionでcommitした際に同じモジュールのmutationのみを実行してくれるはずです


#3

ご回答ありがとうございます!
moduleaにnamespaced: true,を追加し、HelloWorld.vueからのAction呼び出しをthis.$store.dispatch("modulea/c", v);とすることで分離することができました!
生還できました。ありがとうございました。