Coding

Nuxt.jsのVuexでActionやMutationに引数を複数渡す方法

記事のアイキャッチ画像

Nuxt.js環境でVuexを使ってstate管理をしている時に、ActionやMutationに対して引数を複数渡したい場合の渡し方と受け取り方。

はじめに

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

やりたいこと

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

このようにActionに対してparam1param2と複数の引数を渡したいとします。ちなみにこのコードは第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も同じようにすれば複数の引数を渡せます。ぜひ試してみてください。


Category List カテゴリー

Tag List タグ