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中并给予100ms延迟，它就可以正常工作。

我希望能举一个例子，说明我应该如何在客户端准备好后加载数据而不阻塞。或者任何关于我做错了什么的解释。

Answer 1

选项中缺少{ server: false }

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

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