时间戳

首页 > 解决方案 > Vue 在 promise.then() 中返回 Observer

javascript - Vue 在 promise.then() 中返回 Observer

问题描述

我想在created()收到数据时触发 vuex 操作，然后触发从服务器获取更多数据的新异步方法。当数据可用时，我将在组件中使用它们。不幸的是，我被困在Observer从Promise. 我试图在没有运气的情况下将数据更改为 computed()。我尝试过，await但它也没有帮助。另一个计算属性item工作正常。我知道这Observer是 Vue 的反应方式，但我不知道如何解决它。

<SeriesBarChart v-if="! inProgress" :series="series" /> // initial attempt
<SeriesBarChart v-if="! inProgress" :series="groups" /> // computed property attempt

data: () => ({
  series: [{}, {}],
  inProgress: true,
}),
created() {
  this.$store.dispatch('GET_POLL', { slug: this.slug }).then(() => {
    this.runQueries(this.item._id, ['vehicles=car&vehicles=bike', 'region=PRG']); // await here did not help
  });
},
computed: {
  item() {
    return this.$store.getters.POLL;
  },
  groups() {
    return this.series;
  },
},
methods: {
  async runQueries(id, queries) {
      this.inProgress = true;
      const promises = [];
      for (let i = 0; i < queries.length; i += 1) {
        promises.push(this.$store.dispatch('GET_POLL_VOTES', { id, query: queries[i] }));
      }
      Promise.all(promises).then((values) => {
        for (let i = 0; i < values.length; i += 1) {
          this.series[i] = values[i].data.data;
        }
      });
      this.inProgress = false;
    }

标签： javascriptvue.js

解决方案

因为 Yom 没有发布答案，他甚至删除了他有用的评论，所以我会为未来的谷歌人发布我的答案。Vue 提供对象的原因是块外的Observer语句。以下代码按预期工作：this.inProgress = false;then

async runQueries(id, queries) {
  this.inProgress = true;
  const promises = [];
  for (let i = 0; i < queries.length; i += 1) {
    promises.push(this.$store.dispatch('GET_POLL_VOTES', { id, query: queries[i] }));
  }
  Promise.all(promises).then((values) => {
    for (let i = 0; i < values.length; i += 1) {
      this.series[i] = values[i].data.data;
    }
    this.inProgress = false;
  });
}

推荐阅读