Nuxt3 useAsyncData 无法在已安装的生命周期挂钩上工作

Question

我仍然对我在这里做错了什么感到有点困惑。本质上我有一个 vue 组件，我想在安装元素后异步加载一些数据。

我正在使用 NUXT 3 和组合 API。

<script setup>

let directories = useState('directories', () => null);

onMounted( async () => {
const { data: response } = await useAsyncData('directories', () => $fetch('/api/s3-get-directories'));
directories.value = response;
});

</script>

看起来 onMounted 在渲染之前触发，并且没有正确接收数据。如果我将 Mounted 包装到 setTimeout 中并给予 100 毫秒的延迟，它就可以正常工作。

我希望有一个示例来说明如何在客户端准备好后加载数据而不会阻塞。或者对我在这里做错了什么有任何解释。

Answer 1

我缺少{ server: false }选项

await useLazyAsyncData('directories', () => $fetch('/api/s3-get-directories'), { server: false });

这使得它只能在前端运行，而不能在后端运行。