vue3封装列表查询hooks

### Vue3 中封装用于列表查询的 Hooks

在 Vue3 的开发过程中，通过组合 API 和自定义 Hook 可以有效地提高代码可读性和复用性。对于列表查询功能而言，可以创建一个 `useListQuery` hook 来处理数据获取、分页以及过滤等功能。

#### 创建 useListQuery Hook

此钩子主要负责管理与服务器交互的状态，并提供相应的方法给组件调用：

import { ref, computed } from 'vue';

export function useListQuery(fetchDataFn) {
    const loading = ref(false);
    const error = ref(null);
    const data = ref([]);
    
    async function fetchData(params = {}) {
        try {
            loading.value = true;
            const response = await fetchDataFn(params); // 调用传入的数据请求方法
            data.value = response.data || [];
        } catch (err) {
            error.value = err.message;
        } finally {
            loading.value = false;
        }
    }

    return {
        loading,
        error,
        data,
        fetchData
    };
}

上述实现中，`fetchDataFn` 是由外部传递进来的一个异步函数，它应该返回包含所需数据的对象。该 Hook 提供了一个简单的接口来加载远程资源并跟踪其状态[^1]。

#### 使用示例

假设有一个名为 `getUsers` 的服务端 API 请求函数用来获取用户列表，则可以在页面组件内这样使用这个 Hook:

<template>
  <div v-if="loading">Loading...</div>
  <ul v-else>
      <li v-for="(item,index) in users" :key="index">{{ item.name }}</li>
  </ul>
</template>

<script setup>
import { onMounted } from "vue";
import { useListQuery } from "@/hooks/useListQuery"; 
import getUsers from '@/services/userService'; 

const { loading, error, data:users , fetchData} = useListQuery(getUsers);

onMounted(() => {
   fetchData();
});
</script>

这段模板展示了如何利用刚刚编写的 Hook 进行基本操作——当组件挂载完成后自动发起一次网络请求；如果正在等待响应则显示提示信息；一旦接收到有效回复便渲染出相应的 HTML 结构[^2]。

为了进一步增强实用性，在实际项目里还可以考虑加入更多特性比如缓存机制、错误重试策略或是支持参数化查询条件等高级选项[^3]。