Vuexの名前空間でハマった。（local mutation 云々のエラー）

事象

commitしている箇所で以下のような感じのエラーが出て少し悩んだ。

[vuex] unknown local mutation type: 'OTHER_MUTATION', global type: module/globalMutation

解決

ざっくり一言で言うと、 ***「名前空間に気をつけましょう」***でした。
答えはvuexのリファレンスに書いてあります。

アクションをディスパッチするか、グローバル名前空間にミューテーションをコミットするには、dispatch と commit の3番目の引数として {root: true} を渡します。

commitのAPIリファレンスにも書いてある。

サンプル

以下、ダメなやつのサンプル。これだと冒頭のエラーが出る。

namespace:true なので起点がモジュールローカルになる。

Wrong👎

export default {
  namespace: true,
  actions: {
    doHoge ({ commit }) {
      commit('common/OTHER_MUTATION', payload)
    }
  },
  mutations: {
    SOME_MUTATION (state) {}
  }
}

なので、こうする。
namespace:trueだが、commitの引数に{ root: true }を渡すことでroot起点で呼び出すことができるようになる。

Good👍

export default {
  namespace: true,
  actions: {
    doHoge ({ commit }) {
      commit('common/OTHER_MUTATION', payload, { root: true })
    }
  },
  mutations: {
    SOME_MUTATION (state) {}
  }
}

まとめ

初心忘れるべからず。

公式ドキュメント読め!!

この一言に尽きると思う（恥ずかしい）。