Nuxt 3 setup函数中无法将useFetch返回的API数据赋值给变量

你踩了Nuxt 3 + Composition API里ref访问的基础坑：

• useFetch返回的data是ref响应式包装对象，在<script setup>的JS逻辑里访问它的实际返回值，必须通过.value属性，不能直接像普通对象/数组那样读下标。你写const coin = data[0]的时候，是在ref包装对象本身找索引为0的属性，ref实例上根本没有这个属性，拿到的自然是undefined。
• 你最开始的写法能跑，纯粹是因为Vue模板会自动解包顶层ref，模板里写的coin[0]实际等价于coin.value[0]，刚好能读到数组内容，不是因为那种写法是正确的。
• 你试的let coin = ref(data[0])也没用，因为赋值的时候data[0]本身就是undefined，相当于初始化了一个值为undefined的独立ref，后续接口返回数据更新data的时候，coin不会同步变化，当然还是报读取name属性的错误。

推荐两种写法，都能避免模板里反复写下标访问：

方案1：用computed派生单条数据 #

适合不想改原有useFetch逻辑的场景，computed会自动追踪data的变化，始终拿到数组第一个元素：

<script setup>
const route = useRoute()
const { data }  = await useFetch('/api/ticker?id=' + route.params.id)
// 访问ref的.value取实际数组内容，可选链兼容加载未完成的空状态
const coin = computed(() => data.value?.[0])
</script>

<template>
  <!-- 加载完成前不渲染内容，避免空值报错 -->
  <div v-if="coin">
    <h2>{{ coin.name }} Detail page</h2>
    <table border="1 px solid">
      <thead>
        <th>Symbol</th>
        <th>Rank</th>
        <th>Price - US $</th>
        <th>Market Cap - US $</th>
      </thead>
      <tr>
        <td>{{ coin.symbol }}</td>
        <td>{{ coin.rank }}</td>
        <td>{{ coin.price_usd }}</td>
        <td>{{ coin.market_cap_usd }}</td>
      </tr>
    </table>
  </div>
  <div v-else>加载中...</div>
</template>

方案2：用useFetch内置的transform提前处理返回值（最简洁） #

useFetch自带数据转换配置，接口返回数据后会先执行你传入的transform函数，直接把处理后的值赋给data，连额外的computed都不用写：

<script setup>
const route = useRoute()
const { data: coin }  = await useFetch('/api/ticker?id=' + route.params.id, {
  // 直接把接口返回的数组首元素提出来，data最终就是单条币种对象
  transform: (res) => res?.data?.[0]
})
</script>

<template>
  <div v-if="coin">
    <h2>{{ coin.name }} Detail page</h2>
    <table border="1 px solid">
      <thead>
        <th>Symbol</th>
        <th>Rank</th>
        <th>Price - US $</th>
        <th>Market Cap - US $</th>
      </thead>
      <tr>
        <td>{{ coin.symbol }}</td>
        <td>{{ coin.rank }}</td>
        <td>{{ coin.price_usd }}</td>
        <td>{{ coin.market_cap_usd }}</td>
      </tr>
    </table>
  </div>
  <div v-else>加载中...</div>
</template>

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