“composables”文件夹： “可组合逻辑” 或 “可组合函数”

在 Vue 3 项目里，“composables” 文件夹用于放置可复用逻辑的文件，它承载着 Composition API 的核心优势。

Vue 3 的 Composition API 以更灵活的方式组织代码，composables 文件就是遵循其理念而设立的专门存放逻辑复用单元的地方。其中的 useCRUD.js 就是一个典型的逻辑复用文件，它封装了通用的增删改查（CRUD）操作逻辑。

1. 逻辑复用层面

   • 项目中往往有多个组件需要进行 CRUD 操作，比如用户管理、订单管理等模块。useCRUD.js 提供了一套完整的 CRUD 操作逻辑，包括新增（add）、修改（edit）、查看（view）、删除（delete）以及保存（save）等操作。当多个组件需要这些功能时，只需引入这个文件并传入相应参数即可，避免了代码的重复编写。

   • 例如，对于用户管理组件和订单管理组件，它们都可以使用这个 useCRUD 逻辑，只需传入各自对应的实体名称（如用户、订单）、初始化表单数据、创建、删除、更新的 API 函数以及刷新数据的函数等参数，就能实现各自模块的 CRUD 功能。

2. 代码结构组织层面

   • 将 CRUD 操作的逻辑集中放在 composables 文件夹下的 useCRUD.js 中，使项目代码结构更加清晰。它将业务逻辑从组件模板和脚手架部分分离出来，组件自身只负责视图展示和简单的交互，而复杂的业务逻辑都被封装在可复用的函数中。

   • 这样便于代码的维护和扩展。如果 CRUD 操作的逻辑需要修改，比如修改新增操作的验证规则或者修改删除操作的 API 调用方式，只需在 useCRUD.js 中修改一处代码即可，无需在多个组件中查找和修改。

3. 代码示例的详细解释

   • modalVisible、modalAction、modalTitle 等 ref 和 computed 属性用于控制模态框的显示状态、当前操作类型以及模态框标题等视图相关的状态。

   • handleAdd、handleEdit、handleView 函数用于处理对应的新增、编辑、查看操作，它们设置模态框的操作类型和显示状态，并且在编辑和查看时将对应的数据填充到表单中。

   • handleSave 函数是一个关键的保存逻辑函数，它根据当前操作类型（新增或编辑）调用相应的 API（doCreate 或 doUpdate），在调用 API 之前还会进行表单验证，验证通过后执行 API 调用、显示成功消息，并且在成功后刷新数据。

   • handleDelete 函数用于处理删除操作，它调用传入的删除 API（doDelete），在删除成功后显示成功消息并刷新数据。

composables 文件夹的设置是 Vue 3 Composition API 开发模式下的一个良好实践，它使得代码的复用性、可维护性和可读性都得到了极大的提升。