有什么方法可以不使用 vue 3 中的挂起进行组合 api 异步？答案

【问题标题】：any way to not use suspend in vue 3 for composition api async?有什么方法可以不使用 vue 3 中的挂起进行组合 api 异步？
【发布时间】：2021-02-24 11:41:24
【问题描述】：

我有一个组合 API 可以通过 setup() 中的异步获取数据，但我应该在另一个组件中这样定义

    <Suspense>
      <template #default>
        <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
      </template>
      <template #fallback>
        <div>Loading...</div>
      </template>
    </Suspense>

如果我不使用<Suspense>，该组件无法在我的应用程序中呈现，我该如何解决？

【问题讨论】：

如果您使用的是async setup()，则无法避免使用<Suspense> 组件。

标签： vue.js vue-component vuejs3

【解决方案1】：

您可以通过使用v-if 和v-else 来实现此目的。如果您还没有这样做，您还应该使数据具有响应性。

<template>
<div v-if="data">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
</div>
<div v-else>
    Loading...
</div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';
export default defineComponent({
    setup() {
        const data = reactive({});

        return {
            data,
        };
    },
});
</script>

【讨论】：