javascript - @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>

错误：“设置”必须返回“对象”或“函数”，得到“承诺”

Answer 1

该setup函数必须是同步的 才能async使用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在您的模板中使用。