Vue3 这样子写页面更快更高效

前言

在开发管理后台过程中，一定会遇到不少了增删改查页面，而这些页面的逻辑大多都是相同的，如获取列表数据，分页，筛选功能这些基本功能。而不同的是呈现出来的数据项。还有一些操作按钮。

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

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

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

前置知识

Vue

Vue Composition Api[1]

封装

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

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

如何获取列表数据

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

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

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

执行流程

设置加载状态

调用外部传入的函数，将获取到的数据赋值到和中

关闭加载态

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

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

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

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

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

实现数据筛选器

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

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

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

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

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

注意，这里 filterOption 参数类型需要的是 ref 类型，否则会丢失响应式 无法正常工作

清空筛选器字段

在页面中，有一个重置的按钮，用于清空筛选条件。这个重复的动作可以交给 reset 函数处理。

通过使用 Reflect 将所有值设定为，再重新请求一次数据。

什么是 Reflect？看看这一篇文章Reflect 映射对象[2]

导出功能

除了对数据的查看，有些界面还需要有导出数据功能（例如导出 csv，excel 文件），我们也把导出功能写到里

通常，导出功能是调用后端提供的导出获取一个文件下载地址，和函数类似，从外部获取函数来调用

在函数中，新增一个函数调用它。

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

优化

现在，整个已经满足了页面上的需求了，拥有了获取数据，筛选数据，导出数据，分页功能

还有一些细节方面，在上面所有代码中的中的代码片段并没有做任何的处理，只是简单的一下

提供钩子

在新增一个 Options 对象参数，用于函数成功、失败时执行指定钩子函数与输出消息内容。

定义 Options 类型

设置默认值

在没有传递钩子的情况下，推荐设置默认的失败时信息显示

优化，函数

基于 elementui 封装 message 方法

loadData 函数

exportFile 函数

useList 使用方法

本文的完整代码在 github.com/QC2168/snippets/tree/main/useList

另外，为了在日常开发中节省找封装代码片段的时间和提高工作效率（摸 时间++），该仓库还存放一些第三方封装的代码片段 ，方便大家拿取 （持续更新中 ~ ~ ）