Vue 3 组合式 API 最佳实践：构建可维护的企业后台

组合式 API 解决的核心问题是逻辑的复用与组织，而不是单纯的「新写法」。在几百个页面的企业后台里，它带来的可维护性提升非常明显。

一、用 script setup 精简组件

script setup 让模板与逻辑更贴近，省去了返回对象的样板代码，TypeScript 类型推导也更顺。我们新项目全部默认使用它。

二、把逻辑抽成组合式函数

后台里大量重复的「表格 + 查询 + 分页 + 权限」逻辑，抽成可复用的组合式函数后，页面代码量能减少一半以上：

• useTable()：分页、查询、排序、loading 状态一站式封装
• usePermission()：按钮级权限判断，配合后端权限码
• useDict()：数据字典缓存与自动渲染下拉

三、状态管理交给 Pinia

Pinia 比 Vuex 更轻、对 TS 更友好，没有 mutation 的心智负担。我们只把真正跨页面共享的状态（用户信息、字典、标签页）放进 store，组件局部状态留在组件里，避免「万物皆 store」。

小结

组合式 API 的价值在于：把同一块业务逻辑聚拢到一起、变成可复用的函数。当你的后台开始出现「复制粘贴整段 setup」时，就是抽组合式函数的信号。

关键要点

• script setup 为默认起点
• 重复逻辑抽成组合式函数复用
• Pinia 只放跨页面共享状态
• 按业务聚合逻辑，而非按选项类型