如何在Vuex Action中优雅地传递多个参数

// store/index.js (或对应的模块文件)
const store = {
  state: {
    token: 'YOUR_API_TOKEN_HERE', // 替换为您的实际API令牌
    flights: [],
  },
  mutations: {
    setFlights(state, data) {
      state.flights = data;
    },
  },
  actions: {
    /**
     * 获取航班信息
     * @param {object} context - Vuex 上下文对象
     * @param {object} payload - 包含多个参数的载荷对象
     * @param {string} payload.selectedPoint - 出发地
     * @param {string} payload.departurePoint - 目的地
     */
    async getFlights(context, { selectedPoint, departurePoint }) {
      // 构造请求URL，使用解构后的参数
      const apiUrl = `http://api.travelpayouts.com/v2/prices/month-matrix?currency=rub&origin=${selectedPoint}&destination=${departurePoint}&show_to_affiliates&token=${context.state.token}`;

      try {
        const res = await fetch(apiUrl);

        if (!res.ok) {
          // 处理HTTP错误，例如状态码非2xx
          throw new Error(`HTTP error! status: ${res.status}`);
        }

        let result = await res.json();
        if (result.data) {
          context.commit('setFlights', result.data);
        } else {
          console.warn('API response did not contain data:', result);
          context.commit('setFlights', []); // 清空或设置默认值
        }
        return res.ok; // 返回操作是否成功
      } catch (error) {
        console.error('Error fetching flights:', error);
        // 可以提交一个错误mutation或者返回false
        return false;
      }
    },
  },
};

export default store;

<!-- App.vue 或其他组件文件 -->
<template>
  <div>
    <!-- 假设 ArrivalPoint 和 DeparturePoint 是子组件，通过某种方式获取到值 -->
    <ArrivalPoint @update-point="updateSelectedPoint" />
    <DeparturePoint @update-point="updateDeparturePoint" />
    <button @click="fetchFlights">获取航班</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import ArrivalPoint from './components/ArrivalPoint.vue'; // 假设存在
import DeparturePoint from './components/DeparturePoint.vue'; // 假设存在

export default {
  components: {
    ArrivalPoint,
    DeparturePoint,
  },
  data() {
    return {
      selectedPoint: '', // 示例数据，应由子组件更新
      departurePoint: '', // 示例数据，应由子组件更新
    };
  },
  methods: {
    ...mapActions(['getFlights']), // 映射 Vuex action

    updateSelectedPoint(point) {
      this.selectedPoint = point;
    },
    updateDeparturePoint(point) {
      this.departurePoint = point;
    },

    async fetchFlights() {
      if (!this.selectedPoint || !this.departurePoint) {
        alert('请选择出发地和目的地！');
        return;
      }

      // 将多个参数封装成一个对象，作为payload传递
      const success = await this.getFlights({
        selectedPoint: this.selectedPoint,
        departurePoint: this.departurePoint,
      });

      if (success) {
        console.log('航班信息获取成功！');
        // 可以进一步处理获取到的航班数据，例如显示在列表中
      } else {
        console.error('航班信息获取失败，请检查输入或网络。');
      }
    },
  },
};
</script>