Nuxt3如何在其他方法/函数中使用useFetch获取的API返回结果

你的代码有两个核心问题：

• <script setup> 语法糖下不存在this组件实例上下文，this.pageData本身就是undefined，自然无法读取后续属性。
• useFetch返回的data是Vue响应式ref对象，直接访问值需要通过.value属性，同时没有做非空兜底，请求未完成、接口返回异常时直接访问深层属性会抛出undefined错误。

<script setup>
const { apiUrl } = useRuntimeConfig()
const route = useRoute()

const { data: pageData } = await useFetch(
  `${apiUrl}/misc/cmspage/61785b119b4eb50d8d625621`
)

useHead({
  // 传函数形式支持响应式更新，可选链+默认值兜底异常场景
  title: () => pageData.value?.seo?.metatitle || '站点默认标题',
  meta: [
    {
      name: 'description',
      content: () => pageData.value?.seo?.metadesc || '站点默认描述'
    },
    {
      name: 'keywords',
      content: () => pageData.value?.seo?.metakeywords || '站点默认关键词'
    }
  ]
})
</script>

• 你当前代码已经给useFetch加了顶层await，理论上后续代码执行时接口已经返回结果，但依然建议加可选链?.和默认值兜底，避免接口返回结构异常、请求失败时页面崩溃。
• useHead接收函数形式的配置值时，会自动追踪内部依赖的响应式变量，接口数据加载完成后会自动更新页面meta标签，不需要额外手动触发更新。
• 如果不需要响应式更新，也可以在await后直接取pageData.value.seo.metatitle传给title，但依然建议加非空判断。

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