组件中的异步计算 - 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,使你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);
  }
}

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)
       }
    }
}