VUE3封装一个Hook的实现示例

// useUserData.ts
import { ref } from 'vue'
import { getUserData } from '@/api/user'  // 假设这是你定义的API请求

export function useUserData() {
  const userData = ref(null)  // 存储用户数据
  const isLoading = ref(false)  // 请求加载状态
  const error = ref(null)  // 错误信息

  // 获取用户数据的函数
  const fetchUserData = async () => {
    isLoading.value = true
    error.value = null
    try {
      const response = await getUserData()  // 假设这是一个返回用户数据的 API 请求
      userData.value = response.data
    } catch (err) {
      error.value = err.message || '获取数据失败'
    } finally {
      isLoading.value = false
    }
  }

  // 返回状态和操作
  return {
    userData,
    isLoading,
    error,
    fetchUserData,
  }
}

// UserProfile.vue
<template>
  <div>
    <button @click="fetchUserData" :disabled="isLoading">
      获取用户数据
    </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()

// 在组件加载时触发获取用户数据
onMounted(() => {
  fetchUserData()
})
</script>

// UserDetails.vue
<template>
  <div>
    <h3>User Details</h3>
    <button @click="fetchUserData" :disabled="isLoading">
      获取用户数据
    </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>