Vue3的逻辑复用

使用了 Vue3 Composables 之后，逻辑复用比之前要顺手很多，这里说说前端开发最常用的场景，管理页面的列表查询和增删改查的逻辑复用，欢迎大家共同探讨。

用免费的 render 服务搭建了个在线的预览地址，源码在这里，用了免费的 node 环境和免费的 pg 数据库。

可能每个人的具体工作内容不一致，但是应该都完成过这样的工作内容：

1. 列表查询，带分页和过滤条件
2. 新增，修改，查看，删除
3. 进行一些快捷操作，比如：激活、通过

这些最基础的工作可能占用了我们很大的时间和精力，下面来讨论下如何逻辑复用，提高工作效率

需求分析

一个后台管理中心，绝大部分都是这种管理页面，那么需要：

• 首先是封装一些通用的组件，这样代码量最低也容易保持操作逻辑和 UI 的一致性
• 其次要封装一些逻辑复用，比如进入页面就要进行一次列表查询，翻页的时候需要重新查询
• 最后需要有一些定制化的能力，最基本的列需要自定义，页面的过滤条件和操作也不一样

统一复用

1. 发起 http 请求
2. 展示后端接口返回的信息，有成功或者参数校验失败等信息

列表的查询过程

1. 页面加载后的首次列表查询
2. 页面 loading 状态的维护
3. 翻页的逻辑和翻页后的列表重新查询
4. 过滤条件和模糊搜索的逻辑，还有对应的列表重新查询

新增 Item、查询 Item、修改 Item

1. form 在提交过程的禁用状态
2. 发起网络请求
3. 后端接口返回的信息提示
4. 列表重新查询

删除 Item

1. 删除按钮状态的维护(需要至少一个选中删除按钮才可用)
2. 发起网络请求
3. 后端接口返回的信息提示
4. 列表重新查询

定制化的内容

1. table 的列数据
2. item 的属性，也就是具体的表单
3. 快捷操作：改变 user 激活状态
4. 列表的过滤条件

成果展示

1. 打开页面会进行一次列表查询
2. 翻页或者调整页面数量，会进行一次列表查询
3. 右上角的是否激活筛选状态变更会进行一次列表查询
4. 右上角模糊搜索，输入内容点击搜索按钮会进行一次列表查询
5. 点击左上角的新增，弹出表单对话框，进行 item 的新增
6. 点击操作的“编辑”按钮，弹出表单对话框，对点击的 item 进行编辑
7. 点击“改变状态”按钮，弹出确认框，改变 user 的激活状态
8. 选中列表的 checkbox，可以进行删除

使用逻辑复用完成以上的内容一共 200 多行，大部分是各种缩进，可以轻松阅读，还写了一个 Work 的管理，也很简单，证明这套东西复用起来没有任何难度。