Nuxt3问题：useAsyncData结合$fetch仅能发起一次请求

问题原因 #

• 直接在点击函数内调用useAsyncData并使用固定缓存key（如createPerson）时，Nuxt会缓存第一次请求的结果，后续调用会直接返回缓存数据，不会发起新的请求。
• 若在点击函数内创建useAsyncData后调用refresh，首次点击会触发两次请求：因为useAsyncData默认immediate: true，初始化时自动执行一次请求，调用refresh又触发一次；后续因缓存存在，refresh仅触发一次，但这种重复创建实例的写法本身不符合useAsyncData的设计逻辑。

解决方案 #

方案一：直接使用$fetch（推荐） #

useAsyncData的核心作用是服务端渲染时的数据预取与缓存，客户端POST提交通常不需要缓存，直接用$fetch即可：

<script setup lang="ts">
const createPerson = async () => {
    console.log('create person')
    try {
        const data = await $fetch('/api/file', {
            method: 'POST',
            headers: useRequestHeaders(['cookie']),
            body: {
                lastname: fields.value.lastname,
                firstname: fields.value.firstname,
                age: fields.value.age,
                x: fields.value.x,
                y: fields.value.y,
                bio: fields.value.bio
            }
        })
        console.log(data)
    } catch (err) {
        console.error('请求失败:', err)
    }
}
</script>

<button @click="createPerson">Apply</button>

注意：无需手动JSON.stringify请求体，$fetch会自动处理数据序列化。

方案二：正确使用useAsyncData配合refresh #

若确实需要利用useAsyncData的状态管理或缓存能力，应将其放在setup顶层，避免重复创建实例：

<script setup lang="ts">
// 定义响应式的提交参数
const submitPayload = ref({
    lastname: '',
    firstname: '',
    age: '',
    x: '',
    y: '',
    bio: ''
})

// 顶层初始化useAsyncData，设置immediate: false禁止自动发起请求
const { data, refresh, error } = useAsyncData('createPerson', () => 
    $fetch('/api/file', {
        method: 'POST',
        headers: useRequestHeaders(['cookie']),
        body: submitPayload.value
    }),
    { immediate: false }
)

const createPerson = async () => {
    console.log('create person')
    // 更新提交参数
    submitPayload.value = {
        lastname: fields.value.lastname,
        firstname: fields.value.firstname,
        age: fields.value.age,
        x: fields.value.x,
        y: fields.value.y,
        bio: fields.value.bio
    }
    // 调用refresh发起新请求
    await refresh()
    console.log(data.value)
}
</script>

<button @click="createPerson">Apply</button>

这种写法下，每次点击都会用最新的参数发起一次请求，不会出现重复请求或无法发起请求的问题。

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