Nuxt3登录按钮仅首次点击有效问题求助

你遇到的问题根源在于在点击事件的异步函数中误用了useFetch。useFetch是Nuxt3专为组件生命周期内的数据获取设计的组合式函数，默认带有缓存、重复请求防抖等特性，且其状态与组件实例绑定。当你第一次发送错误请求后，useFetch的缓存或状态残留会导致后续正确请求的响应被错误复用，从而出现无法登录的情况。

修复方案 #

将点击事件中的useFetch替换为Nuxt提供的$fetch（它是原生fetch的轻量封装，无默认缓存，每次调用都是独立请求），修改后的代码如下：

<button @click="save" type="button" class="flex w-full justify-center rounded-md bg-red-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-grey-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-grey-600">
     {{ $t('login') }}
</button>

<script setup>
const save = async () => {
  try {
    const data = await $fetch('https://mywebsite/api/login', {
      method: 'POST',
      body: { email: email.value }
    })
    cookie.value = data.token
    window.location.href = '/formulier'
  } catch (error) {
    // 可在此处添加错误提示逻辑，比如弹窗告知用户登录失败
    console.error('登录失败:', error)
  }
}
</script>

额外说明 #

1. 无需手动JSON.stringify请求体，$fetch会自动处理JSON格式的请求与响应
2. 添加try/catch可以更优雅地捕获登录错误，避免未处理的异常中断流程
3. useFetch适合在组件初始化时获取数据（比如页面加载时获取列表），用户交互触发的请求（如登录、表单提交）更适合用$fetch

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