为什么获取数据的Get请求没有返回多个参数,而是返回一个单独的Vuex参数?

huangapple go评论62阅读模式
英文:

Why the fetching data Get request isn't returning several parameters, instead it returns a single one Vuex?

问题

I'm expecting to get data and visualize a list with a fetch GET request, by passing two parameters. So I'm getting an error 400 when I pass two parameters, and I'm getting data ok when I'm passing a single one.

这段文字是关于使用GET请求获取数据并通过传递两个参数来可视化列表的。当传递两个参数时,我遇到了400错误,但当只传递一个参数时,数据正常。

This doesn't work
这部分不起作用

This works
这部分起作用

This works
这部分起作用

英文:

I'm expecting to get data and visualize a list with a fetch GET request, by passing two parameters. So I'm getting an error 400 when I pass two parameters, and I'm getting data ok when I'm passing a single one.

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

This doesn't work

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

This works

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

This works

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

答案1

得分: 0

可以使用 Vuex 并为所选内容创建附加状态,例如:

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

然后为它们创建 mutations:

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
  ...
  // 在调度 getFlights 之前
}

并更改 action 为:

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}`
  );
  ...
}
英文:

You can use vuex and create additional states for selected stuff, for example:

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

then mutations for them:

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

commit them on selection:

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

and change action to:

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}`
  );
  ...
}

huangapple
  • 本文由 发表于 2023年5月13日 17:57:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/76242127.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定