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 在渲染之前触发并且没有正确接收数据。如果我将挂载到 setTimeout 并延迟 100 毫秒，它就可以正常工作。

我希望有一个示例，说明我应该如何在客户端准备好后不阻塞地加载数据。或者对我在这里做错的任何解释。

Answer 1

我在选项中缺少{ server: false }

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

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