Vue 3 多模块响应式状态复用需用组合式函数作状态工厂，每次调用返回独立响应式实例；解构重命名确保引用隔离；差异化配置通过参数注入；跨组件共享状态须另用 provide/inject 或模块级导出响应式变量。

Vue 3 中逻辑复用管理多个独立模块的响应式状态，核心在于明确“复用的是逻辑，不是状态”——每个模块需要自己的一份响应式数据副本，而非共享同一份 ref 或 reactive。

用组合式函数做状态工厂

把 composable 设计成工厂函数，每次调用都返回全新响应式实例。这是支持多模块隔离的最自然方式：

• 函数内部使用 ref、reactive 等 API 创建状态，它们天然不共享
• 不要导出单例对象，也不要让 useXxx 返回全局变量
• 组件中多次调用 useModal()、useForm()、useCounter()，各自获得独立状态

解构重命名确保引用独立

在组件中调用后立即解构并重命名，避免误用同一返回对象导致耦合：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• ✅ 正确：const { count: countA, increment: incA } = useCounter()
• ✅ 正确：const { count: countB, increment: incB } = useCounter()
• ❌ 错误：const a = useCounter(); const b = useCounter();（虽不报错，但语义不清，易混淆）
• ❌ 错误：const { count } = useCounter(); const c = count;（c 是普通值，失去响应式）

差异化配置通过参数注入

当多个模块逻辑相同但行为需定制，直接把配置项作为参数传入 composable：

• 例如 useInput({ initialValue: '', validate: (v) => v.length > 0 })
• 或 useModal({ title: '确认删除', onConfirm: handleDelete })
• 参数在函数内参与响应式初始化和逻辑分支，不影响其他实例

跨组件共享状态要另走路径

如果多个模块确实需要读写同一份状态（如全局主题、用户信息），就不能靠多次调用 useXxx 实现，而应使用：

• provide/inject + reactive：父组件创建并提供，后代组件注入使用
• 模块级导出的 ref/reactive：适合轻量全局状态（如 export const sidebarOpen = ref(false)）
• 注意：这些方案与“多实例逻辑复用”是不同场景，混用会导致状态混乱

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！