组件中的异步计算 \- 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 模式来进行异步计算。

原文由 KitKit 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

计算属性基本上是缓存其结果的函数，因此不必在每次需要时都计算它们。它们 会根据使用的反应值 自动更新。

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

目前尚不完全清楚您想要实现什么，但我最好的猜测是您应该创建一个数据项来保存 response.data ，并使您的 api.get 调用 created 钩。就像是

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

原文由 Roy J 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

es7 通过将 async 和 await 与 axios 的返回承诺一起使用，使这变得非常简单。你需要 vue-async-computed 包。

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

原文由 user320487 发布，翻译遵循 CC BY-SA 3.0 许可协议