Vue 3 逻辑复用怎么在多个组件之间共享状态与方法-Vue.js-PHP中文网

Vue 3逻辑复用不等于状态共享，关键在于响应式数据是否被多个组件共用同一引用；正确做法是将ref定义在composable顶层，错误做法是每次调用都新建ref。

vue 3 逻辑复用怎么在多个组件之间共享状态与方法

Vue 3 逻辑复用本身不等于状态共享——它封装的是可复用的逻辑，但是否共享状态，取决于你如何组织和导出响应式数据。关键在“复用方式”与“状态作用域”的匹配：同一份响应式引用被多个组件导入，才能真正共享；若每次调用都新建 ref/reactive，则只是逻辑复用，状态彼此隔离。

用自定义 Composable 实现跨组件状态共享

这是中小型项目最常用、最轻量的方案。核心是：把响应式状态定义在 composable 文件顶层，而非函数内部，确保所有组件导入的是同一个响应式对象。

✅ 正确写法：状态定义在函数外，函数只负责返回读写接口

src/composables/useAuth.js

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)) 提供安全默认值