はじめに

ActionやMutationを呼び出すdispatch()やcommit()は第3引数を渡すとエラーとなります。とはいえ引数を複数渡したいケースもあるので、今回はその方法について解説していきます。

やりたいこと

this.$store.dispatch('hogeAction', param1, param2)

このようにActionに対してparam1、param2と複数の引数を渡したいとします。ちなみにこのコードは第3引数を渡しているのでエラーになります。

渡し方

this.$store.dispatch('hogeAction', { id: param1, title: param2 })

このように第2引数に渡したい値を適当なプロパティ名で定義したオブジェクトを渡します。

受け取り方

hogeAction({ commit }, { id, title }) {
  const param = {
    data1: id,
    data2: title,
  }
  commit('hogeMutation', param)
}

さいごに

今回はActionを例に記載していますが、Mutationも同じようにすれば複数の引数を渡せます。ぜひ試してみてください。