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 = trueerror.value = nulltry {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，使得代码变得更简洁、可维护且易于复用。