Vue 3逻辑复用不等于状态共享，关键在于响应式数据是否被多个组件共用同一引用；正确做法是将ref定义在composable顶层，错误做法是每次调用都新建ref。
Vue 3 逻辑复用本身不等于状态共享——它封装的是可复用的逻辑，但是否共享状态，取决于你如何组织和导出响应式数据。关键在“复用方式”与“状态作用域”的匹配：同一份响应式引用被多个组件导入，才能真正共享；若每次调用都新建 ref/reactive，则只是逻辑复用，状态彼此隔离。
用自定义 Composable 实现跨组件状态共享
这是中小型项目最常用、最轻量的方案。核心是：把响应式状态定义在 composable 文件顶层，而非函数内部，确保所有组件导入的是同一个响应式对象。
- ✅ 正确写法：状态定义在函数外，函数只负责返回读写接口
import { ref } from 'vue'<br>const user = ref(null)<br>const isLoggedIn = () => !!user.value<br><br>export function login(userData) { user.value = userData }<br>export function logout() { user.value = null }<br>export function useAuth() { return { user, isLoggedIn } }
- ❌ 错误写法：每次调用 useAuth() 都新建 ref → 状态不共享
多个组件调用 useAuth() 后拿到的 user 是同一引用，修改一处，所有组件响应更新。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
父子组件间共享：靠 props + emits 或 v-model
当子组件需要操作父组件的状态（如表单输入），不要各自调用 useInput()，而应由父组件持有唯一数据源，再通过 props 下传、emits 上抛或 v-model 双向绑定。
- 父组件管理
email值，传给EmailInput和SubmitButton -
EmailInput用v-model="email"自动同步；SubmitButton直接读取email显示或校验 - 避免每个子组件都调用
useInput()—— 那会创建三个独立的 ref，互不影响
深层嵌套或全局配置：provide / inject
适用于主题色、语言设置、用户权限等需穿透多层、但又不想提升到 Pinia 的场景。
- 在根组件或布局组件中
provide('theme', themeRef)（themeRef 是 ref 或 reactive） - 任意后代组件用
const theme = inject('theme')获取，修改theme.value会实时同步 - 注意：inject 返回值可能为 undefined，建议用
inject('theme', readonly(defaultTheme))提供安全默认值
大型应用或复杂状态流：Pinia
当共享状态涉及异步请求、持久化、模块拆分、时间旅行调试等需求时，Pinia 是更健壮的选择。
- 状态集中定义在 store 中，天然支持跨组件、跨路由、跨 tab 共享
- 配合
storeToRefs解构可保持响应性，搭配defineStore支持 TypeScript 类型推导 - 不推荐为简单开关或单个字段引入 Pinia，会造成过度设计
