将 NuxtJS3 中的链式 useFetch 查询转换为 useLazyFetch

Question

我又回到了前端 Web 开发，我认为尝试使用 NuxtJS 3 作为我的第一个框架会很有趣。

我是一名后端开发人员（PHP、GoLang、C#），只是想学习一些新东西，所以我的项目不需要完美，但我在尝试转换与 useFetch 一起使用的东西时遇到了困难（并加载整个内容，但需要很长时间才能完成）转向使用 useLazyFetch （因此页面加载速度很快，内容会随着时间的推移而填满）。

这是我组件的 TS 部分：

<script setup>
        const props = defineProps([
            'Id'
        ])
        
        const route = useRoute();
        
        let fetchedPost = {
            Id: "",
            SharedId: "",
            OwnerUid: "",
            Content: "",
            ReplyTo: "",
            QuoteTo: "",
            DatePost: "",
            DateEdit: "",
            DateDeleted: "",
        };
        
        let finalPost = ref({
            Id: "",
            UserName: "",
            Name: "",
            Content: "",
            DatePost: "",
            SharedId: "",
            ReplyTo: "",
            QuoteTo: "",
            ReactionsCount: "",
            ShareQuotedCount: "",
            ResponseCount: "",
        })
        
        const { data: dataPost, pending } = await useFetch(`http://localhost:8080/api/v1/bp/post/${props.Id}`);
        if (dataPost.value) {
            fetchedPost = dataPost?.value?.Data.post;
            finalPost.value.Id = fetchedPost.Id;
            finalPost.value.Content = fetchedPost.Content;
            finalPost.value.DatePost = fetchedPost.DatePost;
            finalPost.value.SharedId = fetchedPost.SharedId;
            finalPost.value.ReplyTo = fetchedPost.ReplyTo;
            finalPost.value.QuoteTo = fetchedPost.QuoteTo;
            const { data: dataUser } = await useFetch(`http://localhost:8080/api/v1/bp/user/i/${fetchedPost.OwnerUid}`);
            if (dataUser.value) {
                let fetchedUser = dataUser?.value?.Data.user
                finalPost.value.UserName = fetchedUser.Username;
                finalPost.value.Name = fetchedUser.Name;
            }
            const { data: countRepliesData } = await useFetch(`http://localhost:8080/api/v1/bp/post/${props.Id}/replies/count`);
            if (countRepliesData.value) {
                finalPost.value.ResponseCount = countRepliesData?.value?.Data.count;
            }
            const { data: countSharesQuotesData } = await useFetch(`http://localhost:8080/api/v1/bp/post/${props.Id}/shares/count`);
            if (countSharesQuotesData.value) {
                finalPost.value.ShareQuotedCount = countSharesQuotesData?.value?.Data.count;
            }
            const { data: countReactData } = await useFetch(`http://localhost:8080/api/v1/bp/post/${props.Id}/reactions/count`);
            if (countReactData.value) {
                finalPost.value.ReactionsCount = countReactData?.value?.Data.count;
            }
        }
    </script>

我尝试用 useLazyFetch 替换 useFetch，愚蠢的部分是 当我只替换第一个（调用数据：dataPost），保存，Nuxt 热重载代码时，它就起作用了，我可以看到我的帖子填满了包含所有数据，但是当我刷新页面时，所有数据都消失了，我不明白为什么。

我想我做错了什么，但由于我在前端开发方面的经验非常低，特别是 nuxt，我想我可能错过了一些愚蠢的事情。 所以请赐教。 （另外，请毫不犹豫地向我提供有关链接我的获取调用的更好方法的建议，我是来学习的）。

提前致谢！