Vue中按钮Loading状态异常求助：调用API后无法恢复

问题核心原因分析 #

你的代码中loading状态依赖于store中的userStore.loading，但状态无法重置为false的主要问题大概率出在store的forgetPassword方法未正确管理loading状态，同时模板中的事件绑定写法存在不规范的地方。

具体修复步骤 #

1. 修正store中forgetPassword的状态管理 #

确保在API请求的整个生命周期内正确切换loading状态，无论请求成功或失败，都要将loading重置为false。使用try/finally包裹逻辑，避免报错时状态无法重置：

// 示例：你的auth store文件（如store/auth.js）
import { ref } from 'vue'
import { defineStore } from 'pinia'

export const useAuthStore = defineStore('auth', () => {
  const loading = ref(false)

  const forgetPassword = async (params) => {
    loading.value = true // 请求开始时开启loading
    try {
      // 替换为你的实际API调用
      const response = await fetch('/api/forget-password', {
        method: 'POST',
        body: JSON.stringify(params),
        headers: { 'Content-Type': 'application/json' }
      })
      // 处理响应逻辑（如提示用户）
    } catch (err) {
      // 处理请求错误（如提示错误信息）
      console.error('忘记密码请求失败:', err)
    } finally {
      loading.value = false // 请求结束（无论成败）关闭loading
    }
  }

  return { loading, forgetPassword }
})

2. 修正模板中的按钮事件绑定 #

Vue中绑定点击事件应使用@click（或v-on:click），而非:onclick（后者是绑定原生DOM的onclick属性，不符合Vue事件绑定规范）：

<!-- 修正前 -->
<button type="primary" :onclick="handleSubmit" :disabled="disabled" class="w-full btn-class">
<!-- 修正后 -->
<button type="primary" @click="handleSubmit" :disabled="disabled" class="w-full btn-class">

3. 确认store中loading的响应式正确性 #

确保store中的loading是用ref或reactive定义的响应式变量，如果是普通变量，computed无法追踪其变化，导致v-if不生效。

验证修复 #

完成上述修改后，测试流程：

• 输入邮箱点击按钮，观察加载图标是否显示
• 等待API请求完成（或手动模拟错误），确认加载图标消失，loading状态重置为false

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