Vuex中如何将多个Action参数与context一同传入URL？

我正尝试解决Vuex中如何将多个Action参数与context一同传入URL的问题，目前遇到400错误。selectedPoint和departurePoint参数来自子组件，且在子组件的data中被设为变量，我的代码示例如下：

async getFlights(context, selectedPoint, departurePoint) {
        
      const res = await fetch(
        `http://api.travelpayouts.com/v2/prices/month-matrix?currency=rub&origin=${selectedPoint}&destination=${departurePoint}&show_to_affiliates&token=${context.state.token}`,
      );
      if (res.ok) {
        let result = await res.json();
        context.commit('setFlights', result.data);
      }
      return res.ok;
    },

问题原因 #

Vuex的Action方法只能接收两个参数：第一个是context上下文对象，第二个是payload（负载参数）。你当前的写法把selectedPoint和departurePoint作为单独参数传入，这会导致第二个参数之后的参数无法被正确获取，departurePoint实际是undefined，最终拼接出的URL参数缺失或错误，触发API返回400请求错误。

修复方案 #

将多个参数打包成一个对象作为payload传递，在Action中通过解构获取参数：

1. 修改Action定义

async getFlights(context, { selectedPoint, departurePoint }) {
      // 先检查参数是否存在，避免空值导致错误
      if (!selectedPoint || !departurePoint) {
        console.error('缺少必要参数：selectedPoint或departurePoint');
        return false;
      }

      const res = await fetch(
        `http://api.travelpayouts.com/v2/prices/month-matrix?currency=rub&origin=${selectedPoint}&destination=${departurePoint}&show_to_affiliates&token=${context.state.token}`,
      );
      if (res.ok) {
        let result = await res.json();
        context.commit('setFlights', result.data);
      }
      return res.ok;
    },

2. 子组件中调用Action时传递对象参数

在子组件的dispatch调用中，把参数包装成对象：

this.$store.dispatch('getFlights', {
  selectedPoint: this.selectedPoint,
  departurePoint: this.departurePoint
});

额外检查点 #

• 确认子组件中的selectedPoint和departurePoint有正确的有效值（比如符合API要求的机场代码格式）
• 可以在Action中打印selectedPoint和departurePoint的值，验证参数是否正确传递
• 检查API的origin和destination参数格式要求，确保参数符合规范

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