Nuxt3：如何在onMounted()中使用useFetch()并保持响应式？

你的代码之所以没有响应式效果，核心问题是在onMounted内部用const声明的a、b、c是局部变量，和外部提前定义的ref完全无关，模板绑定的始终是外部的初始值，请求后的状态更新根本传不到模板里。

下面是用解构赋值实现响应式的正确写法：

<script lang="ts" setup>
import type { FetchError } from 'ofetch'

// 直接在setup顶层解构toRefs处理后的返回值，得到响应式ref
const { pending: a, error: b, data: c, execute } = toRefs(
  useLazyFetch<any[]>('http://localhost:3178/posts')
)

// 在onMounted中触发懒加载请求
onMounted(async () => {
  await execute()
})
</script>
<template>
  <div>{{ a }}</div>
  <div>{{ b }}</div>
  <div>{{ c }}</div>
</template>

关键说明： #

• useLazyFetch返回的是一个响应式对象，通过toRefs可以把它的每个属性转换为独立的响应式ref，这样解构出来的a、b、c本身就具备响应式能力，不需要提前手动声明ref。
• 不需要在onMounted内部重新声明变量，直接用顶层解构的ref即可，模板会自动追踪它们的变化。
• useLazyFetch是懒加载请求，需要调用execute方法触发，这一步放在onMounted里和你原本的逻辑一致。

如果觉得重命名麻烦，也可以直接使用原属性名，省略重命名步骤：

const { pending, error, data, execute } = toRefs(useLazyFetch<any[]>('http://localhost:3178/posts'))

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