VueJS调用Vuex Action传递两个参数仅接收一个，如何解决？

嘿，这个问题我之前也碰到过！Vuex的Action方法其实只能接收单个参数作为payload，所以你直接传两个参数的话，第二个参数会被忽略，这就是为什么你只能拿到index的原因~

要传递多个参数，你需要把它们包装成一个对象或者数组，这样就能在Action里获取到所有参数了，下面给你两种具体的实现方式：

方式一：包装成对象（推荐，可读性更强） #

1. 修改按钮的点击事件 #

把两个参数放到一个对象里传递：

<button class="btn" @click="removeFromTheCart({ index, price: item.price })"> Remove </button>

2. 在Vuex Action中接收参数 #

你可以直接解构payload对象，快速获取里面的参数：

removeFromTheCart({ commit }, { index, price }) {
  console.log("index:", index, "price:", price);
  // 后续可以调用commit，比如 commit('REMOVE_FROM_CART', { index, price })
}

如果不解构的话，也可以通过payload.index和payload.price访问：

removeFromTheCart({ commit }, payload) {
  console.log("index:", payload.index, "price:", payload.price);
}

方式二：包装成数组 #

1. 修改按钮的点击事件 #

把两个参数放到数组里传递：

<button class="btn" @click="removeFromTheCart([index, item.price])"> Remove </button>

2. 在Vuex Action中接收参数 #

通过数组下标访问对应的参数：

removeFromTheCart({ commit }, payload) {
  const index = payload[0];
  const price = payload[1];
  console.log("index:", index, "price:", price);
}

或者用数组解构：

removeFromTheCart({ commit }, [index, price]) {
  console.log("index:", index, "price:", price);
}

两种方式都能解决问题，但更推荐对象方式，因为参数有明确的键名，后续维护代码的时候更容易理解每个参数的含义~

内容的提问来源于stack exchange，提问作者margherita pizza