데이터 가져오기 요청이 여러 매개 변수를 반환하지 않고 단일 Vuex를 반환하는 이유는 무엇입니까?

데이터 가져오기 요청이 여러 매개 변수를 반환하지 않고 단일 Vuex를 반환하는 이유는 무엇입니까?

데이터를 가져오고 두 가지 매개 변수를 전달하여 Fetch GET 요청으로 목록을 시각화할 것으로 예상합니다.그래서 제가 두 개의 매개변수를 통과할 때 오류 400이 발생하고, 하나의 매개변수를 통과할 때 데이터가 정상적으로 발생합니다.

https://stackblitz.com/edit/vue-hrqfyc?file=src%2Fstore%2Findex.js,src%2FApp.vue,src%2Fcomponents%2FArrivalDate.vue,src%2Fcomponents%2FArrivalPoint.vue,src%2Fcomponents%2FDepartureDate.vue,src%2Fcomponents%2FDeparturePoint.vue,src%2Fcomponents%2FFlight.vue,src%2Fcomponents%2FFlightList.vue,src%2Fmain.js

이것은 작동하지 않습니다.

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;
},

작동합니다.

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

작동합니다.

async getFlights(context, departurePoint }) {
    
  const res = await fetch(
    `http://api.travelpayouts.com/v2/prices/month-matrix?currency=rub&origin=LED&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를 사용하고 선택한 항목에 대해 다음과 같은 추가 상태를 생성할 수 있습니다.

state: {
  selectedArival: null,
  selectedDeparture: null,
  ...
},

그들을 위한 돌연변이:

setSelectedArival(state, data) {
  state.selectedArival = data;
},
setSelectedDeparture(state, data) {
  state.selectedDeparture = data;
},

선택 시 커밋:

choosePoint(point) {
  ...
  this.$store.commit('setSelectedDeparture', this.selectedPoint);
  // this.$store.commit('setSelectedArival', this.selectedPoint); from other component
  ...
  // before dispatching getFlights
}
 

작업을 다음으로 변경합니다.

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

언급URL : https://stackoverflow.com/questions/76242127/why-the-fetching-data-get-request-isnt-returning-several-parameters-instead-it