前言

在开发管理的后台过程中，会增加、删除、更改很多页面，这些页面的逻辑大多相同，比如获取列表数据、分页、筛选等基本功能。不同的是呈现的数据项。还有一些操作按钮。

对于刚开始只有 1，2 个页面的时候大多数开发者可能会直接将之前的页面代码再拷贝多一份出来，而随着项目的推进类似页面数量可能会越来越多，这直接导致项目代码耦合度越来越高。

(资料图片)

这也是为什么在项目中一些可复用的函数或组件要抽离出来的主要原因之一

下面，我们封装一个通用的​​useList​​，适配大多数增删改查的列表页面，让你更快更高效的完成任务，准点下班 ~

前置知识

封装

我们需要将一些通用的参数和函数抽离出来，封装成一个通用​​hook​​，后续在其他页面复用相同功能更加简单方便。

定义列表页面必不可少的分页数据

export default function useList() {  // 加载态  const loading = ref(false);  // 当前页  const curPage = ref(1);  // 总数量  const total = ref(0);  // 分页大小  const pageSize = ref(10);}复制代码

如何获取列表数据

思考一番，让​​useList​​函数接收一个​​listRequestFn​​参数，用于请求列表中的数据。

定义一个​​list​​变量，用于存放网络请求回来的数据内容，由于在内部无法直接确定列表数据类型，通过泛型的方式让外部提供列表数据类型。

export default function useList(  listRequestFn: Function) {  // 忽略其他代码  const list = ref([]);}复制代码

在​​useList​​中创建一个​​loadData​​函数，用于调用获取数据函数，该函数接收一个参数用于获取指定页数的数据（可选，默认为​​curPage​​的值）。

这里使用了 async/await 语法，假设请求出错、解构出错情况会走 catch 代码块，再关闭加载态

这里需要注意，传入的 listRequestFn 函数接收的参数数量和类型是否正常对应上请根据实际情况进行调整

export default function useList(  listRequestFn: Function) {  // 忽略其他代码  // 数据  const list = ref([]);  // 过滤数据  // 获取列表数据  const loadData = async (page = curPage.value) => {    // 设置加载中    loading.value = true;    try {      const {        data,        meta: { total: count },      } = await listRequestFn(pageSize.value, page);      list.value = data;      total.value = count;    } catch (error) {      console.log("请求出错了", "error");    } finally {      // 关闭加载中      loading.value = false;    }  };}复制代码

别忘了，还有切换分页要处理

使用 ​​watch​​ 函数监听数据，当​​curPage​​，​​pageSize​​的值发生改变时调用​​loadData​​函数获取新的数据。

export default function useList(  listRequestFn: Function) {  // 忽略其他代码  // 监听分页数据改变  watch([curPage, pageSize], () => {    loadData(curPage.value);  });}复制代码

现在实现了基本的列表数据获取

实现数据筛选器

在庞大的数据列表中，数据筛选是必不可少的功能

通常，我会将筛选条件字段定义在一个​​ref​​中，在请求时将​​ref​​丢到请求函数即可。

在 useList 函数中，第二个参数接收一个​​filterOption​​对象，对应列表中的筛选条件字段。

调整一下​​loadData​​函数，在请求函数中传入​​filterOption​​对象即可

注意，传入的 listRequestFn 函数接收的参数数量和类型是否正常对应上请根据实际情况进行调整

export default function useList<  ItemType extends Object,  FilterOption extends Object>(listRequestFn: Function, filterOption: Ref