Nuxt 3 useFetch：如何从返回数据对象创建响应式字段？

问题原因 #

useFetch返回的data是一个Ref对象，实际响应式数据存储在它的.value属性中。你之前的错误在于直接操作了Ref对象本身，而非其内部的value数据——data这个Ref对象本身并没有pageable属性，该属性只存在于data.value里，所以调用toRef(data.pageable)或toRefs(data)会返回undefined。

可行解决方案 #

1. 使用computed派生（推荐） #

利用computed自动跟踪data.value的变化，派生响应式的pageable：

import { computed } from 'vue'

const { data, error } = useFetch("http://localhost:8080/articles", { query: { page: dataPage }})
const pageable = computed(() => data.value?.pageable)

• 模板中直接使用{{ pageable }}（自动解包）
• script中访问pageable.value获取实际值

2. 结合data.value使用toRef #

先获取Ref的实际值，再用toRef提取指定字段的响应式引用：

import { toRef } from 'vue'

const { data, error } = useFetch("http://localhost:8080/articles", { query: { page: dataPage }})
// 用空对象兜底，避免初始data.value为undefined时报错
const pageable = toRef(data.value || {}, 'pageable')

这种方式保留了原数据的响应式关联，当data.value.pageable变化时，pageable会同步更新。

3. 手动watch监听更新 #

如果需要更灵活的逻辑控制，可以手动监听data的变化，更新独立的Ref：

import { ref, watch } from 'vue'

const { data, error } = useFetch("http://localhost:8080/articles", { query: { page: dataPage }})
const pageable = ref(null)

watch(data, (newData) => {
  pageable.value = newData?.pageable
}, { immediate: true }) // immediate确保初始化时就执行一次赋值

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