@vue-composition / 如何在 setup() 中使用异步方法

Posted 2023-02-16

【中文标题】@vue-composition / 如何在 setup() 中使用异步方法

【英文标题】：@vue-composition / How can I use asynchronous methods in setup()

【发布时间】：2020-05-30 11:37:58

【问题描述】：

<script lang="ts">
import  createComponent  from "@vue/composition-api";

import  SplashPage  from "../../lib/vue-viewmodels";

export default createComponent(
  async setup(props, context) 
    await SplashPage.init(2000, context.root.$router, "plan", "login");
  
);
</script>

错误：“setup”必须返回“Object”或“Function”，得到“Promise”

【参考方案1】：

setup 函数必须是同步的 can be async using Suspense.

如何避免使用异步设置（过时的答案）

onMounted 钩子可以与async 回调一起使用：

import  onMounted  from "@vue/composition-api";

// …
export default createComponent(
  setup(props, context) 
    onMounted(async () => 
      await SplashPage.init(2000, context.root.$router, "plan", "login");
    );
  
);

或者，总是可以调用异步函数而不等待它：

SplashPage.init(2000, context.root.$router, "plan", "login")
  .catch(console.log);

在这两种情况下，您都必须考虑到组件将在异步函数执行之前呈现。不显示依赖于它的内容的一种简单方法是在模板中使用v-if。

【讨论】：

你说必须同步，this async setup呢？

@Greendrake 你是对的。我看到现在有一​​种方法，Suspense。我会尝试这个新功能，然后我会回到这里更新我的答案。 vueschool.io/articles/vuejs-tutorials/…

不幸的是，该功能仅适用于 vue3 而不是 vue2 composition-api