Vuexで複数のペイロードをミューテーションに追加する方法

1. 単一のオブジェクトとして渡す方法: まず、複数のデータをまとめて1つのオブジェクトに格納します。例えば、以下のようなオブジェクトを作成します。

   const payload = {
    data1: 'データ1',
    data2: 'データ2',
    data3: 'データ3'
   };

   次に、ミューテーションにオブジェクトを渡します。

   mutations: {
    myMutation(state, payload) {
      // payloadオブジェクトからデータを取得する
      const { data1, data2, data3 } = payload;
      // データの処理を行う
      // ...
    }
   }

   ミューテーション内で、payloadオブジェクトから必要なデータを取得し、処理を行うことができます。

2. 複数の引数として渡す方法: ペイロードを単一のオブジェクトにまとめずに、複数の引数として渡すこともできます。例えば、以下のように引数を定義します。

   mutations: {
    myMutation(state, data1, data2, data3) {
      // データの処理を行う
      // ...
    }
   }

   ミューテーションを呼び出す際には、複数の引数を指定します。

   this.$store.commit('myMutation', 'データ1', 'データ2', 'データ3');

   ペイロードをオブジェクトにまとめずに、引数として直接渡すことができます。

どちらの方法を選択するかは、プロジェクトの要件や好みによります。オブジェクトを使用する方法は、データの構造を明示的にするために役立ちます。一方、引数の方法はシンプルで直感的な方法です。

以上の方法を使用して、Vuexのミューテーションに複数のペイロードを追加することができます。