【Vuex】action 内で，別の module の action を呼び出すときの注意点

Vuex の action 内で，別の module の action を呼び出したい場合に，思いがけず詰まったので共有させていただきます！

エラー発生

stockModule 内の createStock アクション内から， quizModule の fetchQuizList アクションを呼び出すために，以下のようなコードを書きました．

const stockModule = {
  namespaced: true,
  actions: {
    createStock(context, payload) {
     // 以下略
     context.dispatch("quiz/fetchQuizList", { root: true }); // 注目
    }
  }
};

const quizModule = {
  namespaced: true,
  actions: {
    fetchQuizList(context) {
      // 以下略
    }
  }
};

const store = new Vuex.Store({
  modules: {
    stock: stockModule,
    quiz: quizModule,
  },
});

export default store;

すると，このようなエラーが出てしまいました！！ {root: true} でグローバル空間を指定しているはずなのに，なぜ unknow local action type と言われるのか，2 時間くらい悩んでしまいました 涙

unknown local action type: quiz/fetchQuizList, global type: stock/quiz/fetchQuizList

原因

dispatch は ，
第一引数：アクション名
第二引数：payload
を指定しなければいけないという基本的なことがわかっていませんでした．

context.dispatch("quiz/fetchQuizList", { root: true }); // 注目

の引数の指定の仕方が間違っていました．dispatch の第二引数には payload が入るので，
このままだと，stock/quiz/fetchQuizList というアクションに，{ root: true } というpayload を渡してしまいます！

解決

今回は，stock/quiz/fetchQuizListに渡したい payload は無いので，下のように第二引数に null, 第三引数に {root: true} を指定すると上手く呼び出せるようになりました！

context.dispatch("quiz/fetchQuizList", null, { root: true }); // 注目

まとめ

dispatch は ，
第一引数：アクション名
第二引数：payload
を必ず指定し， {root: true} は第三引数で指定するということを学びました！！

参考記事