Question

我需要将2个参数传递给我在商店中执行的操作：

<tr v-for="printer in printers" :key="printer.id" >
   <td>
      <p >{{printer.name}}</p>
    </td>
    <td>
      <div v-for="preparation_area in preparation_areas" :key="preparation_area.id">
         <button class="primary-light inline"  @click="setPreparationAreaPrinter(printer, preparation_area)">{{preparation_area.name}}</button>
      </div>
   </td>
</tr>

商店：

setPreparationAreaPrinter ({commit}, printer, preparation_area) {
  axios.patch('/preparation_areas/' + preparation_area.id, {
    printer: printer.id,
  })
 .then((response) => {  
.....
  });
}

printer.id可以工作并分配正确的打印机名称，但是preparation_area未定义。正确的实现方式是什么？

Answer 1

您只能传递1个参数，因此，如果需要传递多个参数，请使用数组。数组符合1个参数的条件。然后，您可以通过data [0]和data [1]

访问操作中的每个参数

store.dispatch（'setSplitData'，[data [0]，data [1]]）

//在动作中： setSplitData（context，[data1，data2]）{//使用ES6参数解构

// ...或带有对象： store.dispatch（'setSplitData'，{ 数据1：数据[0]， data2：数据[1]， }）

Answer 2

将参数放入有效负载对象

    setPreparationAreaPrinter ({ commit }, payload){
        axios.patch('/preparation_areas/' + payload.preparation_area.id, {
        printer: payload.printer.id,
    }).then((response) => {...});
    }

并将其反映在您的点击监听器中： @click="setPreparationAreaPrinter({printer, preparation_area})"

将2个参数传递给数组中的vuex操作

2 个答案: