组件中的异步计算 \- VueJS?

新手上路,请多包涵

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

目前,我的组件是:

 <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 许可协议

阅读 374
2 个回答

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

您的计算不使用任何反应项,因此计算它没有意义。它现在返回一个 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 许可协议

es7 通过将 asyncawait 与 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 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题