组件中的异步计算 - VueJS？答案

【问题标题】：Async Computed in Components - VueJS?组件中的异步计算 - VueJS？
【发布时间】：2018-07-16 09:56:52
【问题描述】：

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

目前，我的组件是：

<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 模式来进行异步计算。

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案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);
  }
}

【讨论】：

我在 vuex 中有数据。你能帮我写你的解决方案代码吗？我只是在学习 VueJ，并没有得到你所说的所有知识
查看示例代码的更新答案。我不知道 Vuex 是如何影响你的情况的，所以如果这不能让你走上正确的轨道，请提出一个新问题并具体说明你想要实现的目标。
非常感谢。它工作完美。不需要任何包裹。我为你投了最佳票
它处于生命周期的早期，因此理论上它可以启动得更快。作为一个实际问题，我认为这没有太大区别，@DarkLite1
感谢您的反馈。我还读到，如果您打算从 SPA 转到 SSR，那么最好不要使用 mounted 挂钩，因为它在 SSR 模式下不存在。

【解决方案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)
       }
    }
}

【讨论】：

我试过这个包，但我听说有人在这里解雇了这个包：github.com/vuejs/vue/issues/4083
@KitKit 在 github 上的对话之后，实际上并没有被驳回，但是 vue 创建者决定不在 vue 核心中实现它，同时仍然表示该库很好
如果不使用异步计算包，这怎么可能？我的意思是，一定有办法使用 watcher/vuex 吗？