Nuxt3中useFetch返回格式异常问题咨询

这是因为Nuxt3的useFetch返回的data是响应式的Ref对象，_rawValue和_value是Ref内部实现的字段，真正的接口返回数据存储在Ref的value属性中。

解决方案 #

有两种常用方式获取到实际的JSON数据：

• 直接通过.value访问Ref对象中的数据
• 使用unref函数自动解包Ref（当不确定变量是否为Ref时更安全）

修改后的代码示例 #

<script setup>
const [{ data: organization }, { data: repos }] = await Promise.all([
    useFetch('https://api.github.com/orgs/nuxt'),
    useFetch('https://api.github.com/orgs/nuxt/repos'),
])

// 通过.value访问实际接口返回的JSON数据
console.log('--------organization', organization.value)
console.log('----------repos', repos.value)

// 也可以用unref函数自动解包
// console.log('--------organization', unref(organization))
</script>

模板中使用的注意事项 #

在Vue模板中使用这些响应式数据时，无需手动添加.value，Vue会自动为Ref对象解包：

<template>
  <h2>{{ organization?.name }}</h2>
  <ul>
    <li v-for="repo in repos" :key="repo.id">
      {{ repo.name }}
    </li>
  </ul>
</template>

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