Vue.js Axios Composable中loading状态无法传递给组件Props的问题

核心问题大概率是loading状态未设置为响应式，或是execute方法里没有正确更新loading值。以下是完整的可行方案：

1. 正确实现useAxios Composable #

// composables/useAxios.js
import axios from 'axios'
import { ref } from 'vue'

export function useAxios() {
  // 用ref创建响应式状态
  const loading = ref(false)
  const error = ref(null)

  const execute = async (config) => {
    // 请求开始前开启loading
    loading.value = true
    error.value = null
    try {
      const response = await axios(config)
      return response.data
    } catch (err) {
      error.value = err.response?.data?.message || err.message
      throw err // 抛出错误让调用组件自行处理
    } finally {
      // 请求结束（无论成功失败）关闭loading
      loading.value = false
    }
  }

  return {
    loading,
    error,
    execute
  }
}

这里的关键是用ref包装loading和error，确保状态变化能被组件实时感知。

2. 在注册表单组件中使用Composable #

<!-- RegisterForm.vue -->
<template>
  <div>
    <!-- 直接将响应式loading传递给子组件props -->
    <LoadingAlert :loading="loading" />
    <form @submit.prevent="handleSubmit">
      <!-- 表单输入项 -->
      <button type="submit" :disabled="loading">注册</button>
    </form>
    <div v-if="error" class="error-text">{{ error }}</div>
  </div>
</template>

<script setup>
import { useAxios } from '@/composables/useAxios'
import LoadingAlert from '@/components/LoadingAlert.vue'

// 解构Composable返回的响应式状态和方法
const { loading, error, execute } = useAxios()

const handleSubmit = async () => {
  try {
    const formData = {
      // 收集你的表单数据
    }
    await execute({
      method: 'POST',
      url: '/api/register',
      data: formData
    })
    // 注册成功后的逻辑（比如页面跳转）
  } catch (err) {
    // 可在此添加额外错误处理逻辑
  }
}
</script>

模板中使用响应式ref时会自动解包，无需手动写.value，直接通过:loading="loading"即可传递给子组件props。

3. LoadingAlert子组件接收props #

<!-- LoadingAlert.vue -->
<template>
  <div v-if="loading" class="loading-overlay">
    <div>正在处理，请稍候...</div>
  </div>
</template>

<script setup>
defineProps({
  loading: {
    type: Boolean,
    required: true,
    default: false
  }
})
</script>

常见排查点 #

• 确认之前的loading不是普通变量，必须用ref/reactive创建响应式状态，否则组件无法感知状态变化
• 检查execute方法中是否在请求前开启loading、请求结束（含失败）后关闭loading，避免loading一直处于开启状态
• 确保组件中正确解构了Composable返回的loading对象，没有遗漏或拼写错误

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