Vuex中多参数API请求的优雅管理策略

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    token: 'YOUR_API_TOKEN', // 假设API token也存储在state中
    selectedArrival: null,   // 用于存储用户选择的到达点
    selectedDeparture: null, // 用于存储用户选择的出发点
    flights: [],             // 用于存储获取到的航班数据
  },
  // ... 其他模块
});

// store/index.js
export default new Vuex.Store({
  state: {
    // ...
  },
  mutations: {
    setSelectedArrival(state, data) {
      state.selectedArrival = data;
    },
    setSelectedDeparture(state, data) {
      state.selectedDeparture = data;
    },
    setFlights(state, data) {
      state.flights = data;
    },
  },
  // ... 其他模块
});

// FlightPointSelection.vue (示例组件)
export default {
  data() {
    return {
      selectedPoint: null, // 假设这是组件内部选择的值
    };
  },
  methods: {
    choosePoint(pointType) {
      // 假设 this.selectedPoint 是用户通过下拉菜单或输入框选择的值
      if (pointType === 'departure') {
        this.$store.commit('setSelectedDeparture', this.selectedPoint);
      } else if (pointType === 'arrival') {
        this.$store.commit('setSelectedArrival', this.selectedPoint);
      }

      // 可以在此处检查两个参数是否都已就绪，然后派发获取航班的Action
      // 例如：
      // if (this.$store.state.selectedDeparture && this.$store.state.selectedArrival) {
      //   this.$store.dispatch('getFlights');
      // }
    },
  },
};

// store/index.js
export default new Vuex.Store({
  state: {
    // ...
  },
  mutations: {
    // ...
  },
  actions: {
    async getFlights(context) {
      // 从Vuex state中获取出发点和到达点
      const origin = context.state.selectedDeparture;
      const destination = context.state.selectedArrival;
      const token = context.state.token;

      // 检查参数是否有效，防止发起无效请求
      if (!origin || !destination) {
        console.warn('Origin or Destination is not selected. Cannot fetch flights.');
        return false; // 或者抛出错误
      }

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

        if (res.ok) {
          let result = await res.json();
          context.commit('setFlights', result.data);
        } else {
          console.error(`API request failed with status: ${res.status}`);
          // 根据实际情况处理错误，例如提交一个错误状态
        }
        return res.ok;
      } catch (error) {
        console.error('Error fetching flights:', error);
        return false;
      }
    },
  },
});