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>

错误:“setup”必须返回“对象”或“函数”，得到“Promise”

Answer 1

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

如何避免使用异步设置(过时的答案)

onMounted Hook 可以与 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。