如何在Nuxt3中实现点击按钮触发的合理数据获取逻辑？

你可以移除lazy选项，仅保留immediate: false，这样就能省去额外维护的load状态，让逻辑更简洁：

<script lang="ts" setup>
const { pending, data, execute } = useFetch("URL", { 
  server: false, 
  immediate: false 
})

async function handleClick() {
  await execute()
}
</script>

<template>
  <div>
    {{ data?.toString() }}
    <div v-if="pending">loading...</div>
    <button @click="handleClick" v-else>load</button>
  </div>
</template>

为什么这样更合理？ #

• 当设置immediate: false时，useFetch不会自动发起请求，此时pending的初始值为false，正好匹配页面初始状态（未点击按钮时无加载中状态）。
• 点击按钮调用execute()触发请求时，pending会自动切换为true，请求完成后恢复为false，完全不需要额外状态变量来控制显示逻辑。

如果你的场景确实需要lazy模式（仅客户端渲染、不进行服务端请求），也可以通过初始化hasTriggered变量来规避初始pending为true的问题，但上面的方案已经能覆盖绝大多数点击触发请求的场景，且代码更简洁易读。

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