嵌套 useFetch 导致 Nuxt 3 中的 Hydration 节点不匹配

Question

在 Nuxt 3 页面内，我通过从 pinia 商店调用操作来获取帖子数据：

<template>
  <div v-if="postData && postContent">
    {{ postData }}
    {{ postContent }}
  </div>
</template>

<script setup>
const config = useRuntimeConfig()
const route = useRoute()
const slug = route.params.slug
const url = config.public.wpApiUrl
const contentStore = useContentStore()

await contentStore.fetchPostData({ url, slug })

const postData = contentStore.postData
const postContent = contentStore.postContent
</script>

那是我的商店：

import { defineStore } from 'pinia'

export const useContentStore = defineStore('content',{
    state: () => ({
        postData: null,
        postContent: null
    }),
    actions: {
        async fetchPostData({ url, slug }) {
            try {
                const { data: postData, error } = await useFetch(`${url}/wp/v2/posts`, {
                    query: { slug: slug },
                    transform(data) {
                        return data.map((post) => ({
                            id: post.id,
                            title: post.title.rendered,
                            content: post.content.rendered,
                            excerpt: post.excerpt.rendered,
                            date: post.date,
                            slug: post.slug,
                        }));
                    }
                })
                this.postData = postData.value;
                if (postData && postData.value && postData.value.length && postData.value[0].id) {
                    const {data: postContent} = await useFetch(`${url}/rl/v1/get?id=${postData.value[0].id}`,
                        {
                            method: 'POST',
                        });
                    this.postContent = postContent.value;
                }
            } catch (error) {
                console.error('Error fetching post data:', error)
            }
        }
    }
});

浏览器中的输出正常，但我在浏览器控制台中收到以下错误：

entry.js:54 [Vue warn]: Hydration node mismatch:
- rendered on server: <!---->  
- expected on client: div 
  at <[slug] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <Anonymous key="/news/hello-world()" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/news/hello-world', hash: '', query: {…}, name: 'news-slug', path: '/news/hello-world', …}  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Default ref=Ref< undefined > > 
  at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot>

如何解决这个问题？

我尝试在 onMounted 中获取帖子数据，但在这种情况下 postData 和 postContent 保持为空

onMounted(async () => {
  await contentStore.fetchPostData({ url, slug })
})

Answer 1

您可以使用

ClientOnly

组件来消除该警告。请参阅文档了解更多信息。

该组件仅在客户端渲染其插槽。