// useUserData.ts
import { ref } from 'vue'
import { getUserData } from '@/api/user'  // 假設(shè)這是你定義的API請(qǐng)求

export function useUserData() {
  const userData = ref(null)  // 存儲(chǔ)用戶數(shù)據(jù)
  const isLoading = ref(false)  // 請(qǐng)求加載狀態(tài)
  const error = ref(null)  // 錯(cuò)誤信息

  // 獲取用戶數(shù)據(jù)的函數(shù)
  const fetchUserData = async () => {
    isLoading.value = true
    error.value = null
    try {
      const response = await getUserData()  // 假設(shè)這是一個(gè)返回用戶數(shù)據(jù)的 API 請(qǐng)求
      userData.value = response.data
    } catch (err) {
      error.value = err.message || '獲取數(shù)據(jù)失敗'
    } finally {
      isLoading.value = false
    }
  }

  // 返回狀態(tài)和操作
  return {
    userData,
    isLoading,
    error,
    fetchUserData,
  }
}

// UserProfile.vue
<template>
  <div>
    <button @click="fetchUserData" :disabled="isLoading">
      獲取用戶數(shù)據(jù)
    </button>

    <div v-if="isLoading">加載中...</div>
    <div v-if="error">{{ error }}</div>
    <div v-if="userData">
      <p>用戶名：{{ userData.name }}</p>
      <p>年齡：{{ userData.age }}</p>
      <!-- 更多用戶信息展示 -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useUserData } from '@/hooks/useUserData'  // 引入封裝好的Hook

// 使用 Hook
const { userData, isLoading, error, fetchUserData } = useUserData()

// 在組件加載時(shí)觸發(fā)獲取用戶數(shù)據(jù)
onMounted(() => {
  fetchUserData()
})
</script>

// UserDetails.vue
<template>
  <div>
    <h3>User Details</h3>
    <button @click="fetchUserData" :disabled="isLoading">
      獲取用戶數(shù)據(jù)
    </button>

    <div v-if="isLoading">加載中...</div>
    <div v-if="error">{{ error }}</div>
    <div v-if="userData">
      <p>用戶名：{{ userData.name }}</p>
      <p>電子郵件：{{ userData.email }}</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useUserData } from '@/hooks/useUserData'

const { userData, isLoading, error, fetchUserData } = useUserData()

onMounted(() => {
  fetchUserData()
})
</script>