Nuxt3 useAsyncData 无法在 Mounted 生命周期挂钩上工作

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 });

这使得它仅运行在前端而不是后端。

Nuxt3 useAsyncData 无法在 Mounted 生命周期挂钩上工作

Nuxt3 useAsyncData not working onMounted lifecycle hook

nuxt.js

nuxtjs3

nuxt3