Nuxt3中fetch获取的数据无法在模板渲染，请求排查错误

问题原因 #

Nuxt3对Options API的fetch钩子行为有调整，且更推荐使用Composition API的useFetch/useAsyncData实现数据获取。你当前的Options API写法未适配Nuxt3的逻辑，导致数据未正确更新到组件状态中。

解决方案 #

1. 修正Options API写法（使用asyncData） #

Nuxt3中Options API的asyncData是专门用于服务端/客户端预获取数据的方法，替换你当前的fetch钩子即可：

<template>
    <div>
        <pre>{{ $data }}</pre>
        <ul>
            <li v-for="planet in planets" :key="planet.slug">
                <NuxtLink :to="planet.slug">
                    {{ planet.title }}
                </NuxtLink>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    async asyncData() {
        const res = await fetch('https://api.nuxtjs.dev/planets')
        const planets = await res.json()
        return { planets }
    }
}
</script>

2. Composition API正确写法（useFetch） #

Nuxt3推荐使用<script setup>结合useFetch，这是最简洁的数据获取方式：

<template>
    <div>
        <pre>{{ planets }}</pre>
        <ul>
            <li v-for="planet in planets" :key="planet.slug">
                <NuxtLink :to="planet.slug">
                    {{ planet.title }}
                </NuxtLink>
            </li>
        </ul>
    </div>
</template>

<script setup>
const { data: planets } = await useFetch('https://api.nuxtjs.dev/planets')
</script>

3. Composition API正确写法（useAsyncData） #

如果需要自定义数据处理逻辑，使用useAsyncData：

<template>
    <div>
        <pre>{{ planets }}</pre>
        <ul>
            <li v-for="planet in planets" :key="planet.slug">
                <NuxtLink :to="planet.slug">
                    {{ planet.title }}
                </NuxtLink>
            </li>
        </ul>
    </div>
</template>

<script setup>
const { data: planets } = await useAsyncData('planets', async () => {
    const res = await fetch('https://api.nuxtjs.dev/planets')
    return res.json()
})
</script>

关键注意点 #

• <script setup>是Nuxt3官方推荐的组件编写方式，Composition API的所有数据获取方法都需要在此环境下使用。
• 若坚持使用Options API，asyncData是比fetch更可靠的预数据获取方案，它会在组件初始化前完成数据获取并注入状态。
• 可通过浏览器控制台的网络面板确认API请求是否成功（你使用的API地址是有效的，问题大概率出在写法上）。

内容的提问来源于stack exchange，提问作者Majid