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

Question

<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”

Answer 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。