Nuxt3中如何通过第三方SDK/插件异步获取Contentful数据？

1. 先封装SDK客户端为Nuxt插件 #

把Contentful的客户端配置封装成插件，确保全局只初始化一次：

// plugins/contentful.client.js
import { createClient } from 'contentful'

export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig()
  const client = createClient({
    space: config.public.contentfulSpaceId,
    accessToken: config.public.contentfulAccessToken
  })
  return {
    provide: {
      contentful: client
    }
  }
})

注：如果是需要保密的密钥（比如预览token），可以放在runtimeConfig.private下，确保仅在服务端调用。

2. 控制数据获取的执行时机 #

Nuxt 3提供了专门的组合式函数替代Nuxt 2的生命周期，按需选择即可：

仅在服务端获取数据（对应Nuxt 2的asyncData/服务端fetch） #

用useAsyncData结合内置的服务端处理逻辑，数据会自动从服务端序列化到客户端，避免重复请求：

<script setup>
const { $contentful } = useNuxtApp()
// 第一个参数是缓存key，确保同key的请求不会重复执行
const { data: entries } = await useAsyncData('contentful-page-entries', async () => {
  const res = await $contentful.getEntries({
    content_type: 'page_type' // 替换为你的内容类型ID
  })
  return res.items
})
</script>

仅在客户端获取数据（对应Nuxt 2的mounted） #

如果数据不需要SEO渲染，只在客户端加载，用onMounted包裹逻辑：

<script setup>
const { $contentful } = useNuxtApp()
const entries = ref([])

onMounted(async () => {
  const res = await $contentful.getEntries({
    content_type: 'page_type'
  })
  entries.value = res.items
})
</script>

3. 复用逻辑的优化（可选） #

如果多个组件需要调用相同的Contentful接口，可以把获取逻辑封装为可复用的组合式函数：

// composables/useContentful.js
export const useContentfulEntries = async (contentType) => {
  const { $contentful } = useNuxtApp()
  const { data } = await useAsyncData(`contentful-${contentType}`, async () => {
    const res = await $contentful.getEntries({ content_type: contentType })
    return res.items
  })
  return data
}

组件中直接调用：

<script setup>
const entries = await useContentfulEntries('page_type')
</script>

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