是否可以在App.vue顶部组件中使用await
?
每当我尝试使用它时,应用程序什么也不显示?
<template>
<Suspense>
<template #default>
<div>Hello</div>
</template>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>
</template>
<script lang="ts">
import { defineComponent, onErrorCaptured, ref, Ref } from 'vue';
export default defineComponent({
name: 'App',
components: {},
async setup() {
console.log('async setup - App.vue');
const error: Ref<undefined | Error> = ref(undefined);
onErrorCaptured((e) => {
error.value = e;
return true;
});
if (error.value) return { error };
return {};
}
});
</script>
<style lang="scss">
</style>
2条答案
按热度按时间pod7payv1#
当
setup()
是async
时,元件本身会变成 async component。然后元件必须在父元件**中的<suspense>
**内呈现。除非<suspense>
有自己的异步子元件,否则它不应该在异步元件自己的模板中。第一个
如果你不想让组件异步运行,并且你只有
async
代码在setup()
中运行,你应该把这个代码 Package 在它自己的async
块中(例如,在一个async
函数中)。例如,在挂载组件时获取数据是很常见的,所以你可以使用async
回调函数来调用await
:k97glaaz2#
我不明白什么是异步关于你的应用程序组件判断从你所提供的,但我会与你分享我所做的,为我的特殊需要。
我有一个用于应用程序设置的模块,它导出了一个“加载应用程序设置”函数。我希望appSettings的这个对象保存以下内容的状态:我的模块还导出了另外两个函数,一个用于提供getter和setter,另一个用于注入所有的函数。我猜这就像一个没有存储的存储。
因此,为了在创建应用程序之前加载数据(从IndexedDB),我修改了 main.js,如下所示:
现在我已经将一些数据加载到我的模块中,并且现在可以在 * App.vue * 中使用它,而无需async*App.vue *,因为这些数据现在存储在模块中。
所以基本上,为了克服“App.vue不能做asnyc”的问题,我只是在使用createApp之前做好一切准备
希望这对你有帮助。