解决Vuex Action中多参数API请求的策略与实践

// 这种方式可能导致问题，特别是在参数来源分散或时序不确定时
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}`,
  );
  // ...
}

// store/index.js
export default createStore({
  state: {
    selectedArival: null,   // 目的地参数
    selectedDeparture: null, // 出发地参数
    token: 'YOUR_API_TOKEN', // API token，通常从环境变量或配置中获取
    flights: [],             // 存储获取到的航班数据
  },
  // ... 其他配置
});

// store/index.js
export default createStore({
  // ...
  mutations: {
    setSelectedArival(state, data) {
      state.selectedArival = data;
    },
    setSelectedDeparture(state, data) {
      state.selectedDeparture = data;
    },
    setFlights(state, data) {
      state.flights = data;
    },
  },
  // ...
});

// 例如，在某个选择出发点或目的地的组件中
export default {
  data() {
    return {
      selectedPoint: '' // 假设这是用户选择的值
    };
  },
  methods: {
    handlePointSelection() {
      // 当用户选择出发点时
      this.$store.commit('setSelectedDeparture', this.selectedPoint);
      // 当用户选择目的地时 (如果这是另一个组件或在不同时机)
      // this.$store.commit('setSelectedArival', this.selectedPoint);

      // 在所有必要参数都更新到Vuex State后，再dispatch Action
      // 这里的dispatch不需要传递参数，因为Action会从State中获取
      this.$store.dispatch('getFlights');
    }
  }
};

// store/index.js
export default createStore({
  // ...
  actions: {
    async getFlights(context) {
      // 从Vuex State中获取参数
      const { selectedDeparture, selectedArival, token } = context.state;

      // 关键参数校验：确保在发起请求前参数已设置
      if (!selectedDeparture || !selectedArival) {
        console.warn('Warning: Departure or arrival point not set. Cannot fetch flights.');
        // 可以返回一个错误状态或抛出异常
        return false;
      }

      try {
        const res = await fetch(
          `https://api.travelpayouts.com/v2/prices/month-matrix?currency=rub&origin=${selectedDeparture}&destination=${selectedArival}&show_to_affiliates=true&token=${token}`
        );

        if (res.ok) {
          let result = await res.json();
          context.commit('setFlights', result.data);
          return true; // 表示请求成功
        } else {
          // 处理非2xx状态码的错误
          console.error(`API request failed with status: ${res.status}, message: ${await res.text()}`);
          // 根据状态码进行更详细的错误处理，例如：
          // if (res.status === 400) { alert('请求参数错误，请检查输入！'); }
          return false; // 表示请求失败
        }
      } catch (error) {
        // 处理网络错误或解析错误
        console.error('Error fetching flights:', error);
        return false; // 表示请求失败
      }
    },
  },
  // ...
});