组件中的异步计算- VueJS？

Question

我正在寻找组件中异步计算方法的解决方案：

目前，我的组件是：

<div class="msg_content">
   {{messages}}
</div>

<script>
export default {
  computed: {
    messages: {
      get () {
        return api.get(`/users/${this.value.username}/message/`, {'headers': { 'Authorization': 'JWT ...' }})
        .then(response => response.data)
      }
    }
  },
}
</script>

结果：{}

如何在Promise模式下重写？因为我认为我们可以通过写入Promise模式来进行异步计算。

Answer 1

计算属性基本上是缓存它们的结果的函数，这样就不必在每次需要它们时都进行计算。他们根据使用的反应值自动更新。

您的计算器不使用任何反应项，因此它作为计算器没有意义。它现在返回一个Promise (假设then的通常行为)。

还不完全清楚您想要实现什么，但我最好的猜测是，您应该创建一个数据项来保存response.data，并在created hook中进行api.get调用。就像这样

export default {
  data() {
      return {
        //...
        messages: []
      };
  },
  created() {
    api.get(`/users/${this.value.username}/message/`, {
        'headers': {
          'Authorization': 'JWT ...'
        }
      })
      .then(response => this.messages = response.data);
  }
}

Answer 2

通过将async和await与axios返回的promise结合使用，es7使这项工作变得非常简单。您将需要vue-async-computed包。

export default {
   asyncComputed: {
       async myResolvedValue() {
          return await api.get(`/users/${this.value.username}/message/`, {'headers': { 'Authorization': 'JWT ...' }})
              .then(response => response.data)
       }
    }
}