ymmooot

Vuex の同名 mutation / action の挙動

同名の mutation / action はすべて反応する

これはドキュメントに書いてあるし、当たり前なんだけど

デフォルトでは、モジュール内部のアクション、ミューテーション、そしてゲッターはグローバル名前空間の元で登録されます - これにより、複数のモジュールが同じミューテーション/アクションタイプに反応することができます。

例えば、以下のようなコードがあった場合

App.vue<template>
  <div id="app">
    {{ $store.state.count }}
    {{ $store.state.sub1.count }}
    {{ $store.state.sub2.count }}
    <button @click="$store.commit('increment')">+</button>
  </div>
</template>

main.jsconst store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment (state) {
      state.count++
    },
  },
  modules: {
    sub1: {
      state: {
        count: 0,
      },
      mutations: {
        increment (state) {
          state.count++
        },
      },
    },
    sub2: {
      namespaced: true,
      state: {
        count: 0,
      },
      mutations: {
        increment (state) {
          state.count++
        },
      },
    },
  },
})

ボタンをクリックすると $store.state.count と $store.state.sub1.count はどちらもカウントアップする。


commit や dispatch はメソッド呼び出しではなく、タイプとハンドラーを持つ一種のイベントという考えなので当然なんだけど、普段自分は namespaced を false にして使わないので、namespaced: true になってないコードを namespaced: true に変えていたときに module の内部の action が引数で受け取ってる commit がローカルなものに見えてしまい、なぜ他の作用を与えているのか気づけずに少しとまどってしまった。

結論

最初から namespaced: true にしてくれ

Share on