Nuxt 3问题：从Fetch响应设置响应式数据异常求助

数据老陈

2026-7-15

解决Nuxt3中API响应头数据硬刷新后重置及重复请求问题

问题原因分析

useFetch单独ref的问题：你定义的totalItems是独立响应式变量，Nuxt3在服务端渲染时会设置它的值，但客户端水合（hydration）过程中，由于该变量未被Nuxt序列化到页面，会被初始值0覆盖，导致硬刷新后短暂显示正确值又重置。
useAsyncData手动赋值的问题：你之前的写法没有返回数据给useAsyncData，Nuxt无法进行缓存和序列化处理，不仅会触发重复请求，还会出现初始值未更新的卡顿体验。

解决方案一：使用useAsyncData统一返回数据

将响应体和响应头数据封装成一个对象返回，让Nuxt自动处理序列化和缓存，确保服务端渲染的值能在客户端正确保留，且仅发起一次请求：

const { data: result } = await useAsyncData('items', async () => {
  const response = await $fetch.raw('http://api.test/items')
  return {
    items: response._data,
    totalItems: response.headers.get('x-total-count')
  }
})

// 用computed做兜底，避免初始值为undefined
const items = computed(() => result.value?.items || [])
const totalItems = computed(() => result.value?.totalItems || 0)

解决方案二：使用useFetch的transform选项

利用useFetch的transform钩子，将响应体和响应头数据合并后返回，同样能让Nuxt处理序列化，避免水合时重置：

const { data: result } = await useFetch('http://api.test/items', {
  async transform(response) {
    // 手动解析响应体
    const items = await response.json()
    // 获取响应头字段
    const totalItems = response.headers.get('x-total-count')
    return { items, totalItems }
  }
})

const items = computed(() => result.value?.items || [])
const totalItems = computed(() => result.value?.totalItems || 0)