Vuex中处理多参数API请求的最佳实践：通过状态管理优化Get请求

// 尝试失败的Action示例
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 new Vuex.Store({
  state: {
    selectedArival: null,   // 存储目的地
    selectedDeparture: null, // 存储出发地
    token: 'YOUR_API_TOKEN', // 假设API token也存储在state中
    // ... 其他应用状态
  },
  // ...
});

// store/index.js
export default new Vuex.Store({
  // ...
  mutations: {
    setSelectedArival(state, data) {
      state.selectedArival = data;
    },
    setSelectedDeparture(state, data) {
      state.selectedDeparture = data;
    },
    // ... 其他mutation
  },
  // ...
});

// SomeDeparturePointComponent.vue
<template>
  <select @change="chooseDeparturePoint">
    <!-- options -->
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedPoint: '' // 假设这是用户选择的值
    };
  },
  methods: {
    chooseDeparturePoint() {
      // 当用户选择出发点时，更新Vuex state
      this.$store.commit('setSelectedDeparture', this.selectedPoint);
    }
  }
};
</script>

// SomeArrivalPointComponent.vue
<template>
  <select @change="chooseArrivalPoint">
    <!-- options -->
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedPoint: '' // 假设这是用户选择的值
    };
  },
  methods: {
    chooseArrivalPoint() {
      // 当用户选择抵达点时，更新Vuex state
      this.$store.commit('setSelectedArival', this.selectedPoint);
    }
  }
};
</script>

// store/index.js
export default new Vuex.Store({
  // ...
  actions: {
    async getFlights(context) {
      const { selectedDeparture, selectedArival, token } = context.state;

      // 在发起请求前，进行参数存在性检查，避免无效请求
      if (!selectedDeparture || !selectedArival) {
        console.warn("出发地或目的地未选择，无法获取航班信息。");
        return false; // 或者抛出错误
      }

      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); // 假设有一个mutation来设置航班数据
      } else {
        console.error('获取航班信息失败:', res.status, res.statusText);
        // 可以添加更详细的错误处理，例如弹出错误消息
      }
      return res.ok;
    },
  },
  // ...
});