VUE3封装一个Hook

在 Vue 3 中，Composition API 让我们能够封装和复用代码逻辑，尤其是通过 setup 函数进行组件间的复用。为了提高代码的可复用性，我们可以把一些常见的 API 请求和状态管理逻辑封装到一个单独的 hook 中。

以下是一个简单的例子，我们将封装一个用于获取用户数据的 API 请求，并提供用于处理请求的状态、错误和数据的逻辑：

示例：封装 API 请求 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,
  }
}

组件中使用这个 Hook

// 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>

优化：

通过将 API 请求逻辑和状态管理封装到 useUserData 中，你可以在不同的组件中轻松复用这一逻辑，只需要导入并调用 useUserData 即可。这样，组件的逻辑更加简洁，同时 API 请求逻辑也可以集中管理，增强了代码的可维护性和复用性。

举个例子：

假设你有多个页面或组件需要进行用户数据的请求，你只需要在这些组件中调用 useUserData，而无需重复编写相同的请求和状态管理逻辑。

另一个组件复用：

// 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>

通过这种封装的方式，API 请求和相关的状态管理都得到了有效的抽象。每个需要获取用户数据的组件，只需简单调用 useUserData，使得代码变得更简洁、可维护且易于复用。