最轻量实用的Vue响应式数据跨组件共享方式是组合式API + provide/inject + reactive封装状态仓库。在父组件provide共享响应式对象，后代组件inject使用，支持直接读写与方法调用；无层级关系时可用全局reactive事件总线替代。
Vue 响应式数据跨组件共享，不依赖 Vuex，最轻量实用的方式是用 组合式 API + provide / inject + reactive 搭配一个简单的“状态仓库”对象。它足够灵活、无额外依赖、逻辑清晰，适合中小型项目或局部状态管理。
用 reactive + provide / inject 封装共享状态
核心思路：在父组件（如 App.vue 或某个布局组件）中创建一个响应式对象，通过 provide 提供给后代组件；子组件用 inject 获取并直接使用，所有修改都会自动触发更新。
- 定义一个可复用的状态对象（推荐单独抽成 composable）：
import { reactive } from 'vue'
export function useSharedState() {
return reactive({
userInfo: { name: '', id: null },
theme: 'light',
unreadCount: 0,
// 可添加 setter 方法，增强可维护性
setUserInfo(user) {
this.userInfo = { ...user }
},
toggleTheme() {
this.theme = this.theme === 'light' ? 'dark' : 'light'
}
})
}
- 在顶层组件中 provide：
import { provide } from 'vue'
import { useSharedState } from './composables/useSharedState'
export default {
setup() {
const shared = useSharedState()
provide('shared', shared)
return () => <router-view />
}
}
- 任意后代组件中 inject 使用：
import { inject } from 'vue'
export default {
setup() {
const shared = inject('shared')
// 直接读写 shared.userInfo、shared.unreadCount 等，响应式生效
return () => (
<div>
<p>你好，{shared.userInfo.name}</p>
<button onClick={() => shared.setUserInfo({ name: '张三', id: 1001 })}>
更新用户
</button>
</div>
)
}
}
避免响应丢失：inject 时加默认值或校验
inject 默认返回 undefined，若组件可能脱离 provide 链（比如动态挂载、测试环境），建议提供 fallback 或做非空判断：
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- inject 第二个参数设为 () => ({})，避免解构报错
- 或封装一层安全访问函数，例如：
const shared = inject('shared') || {} - 更稳妥的做法：在 composable 中导出一个带校验的 useShared 方法，内部检查 inject 结果并 warn
需要跨路由/非父子组件？用事件总线 + reactive（轻量替代）
如果组件完全无层级关系（如两个并列的 router-view 子组件），provide/inject 不适用。此时可用一个极简事件总线配合响应式对象：
- 创建一个全局响应式状态 + emit/update 辅助函数
- 用
watch或watchEffect订阅变化，或手动调用 update 触发刷新 - 比 $emit/$on 更现代，比 Vuex 更轻——本质是“中心化 reactive 对象 + 显式通知”
示例（无需第三方库）：
src/stores/bus.jsimport { reactive, watch } from 'vue'
const busState = reactive({
notifications: [],
sidebarOpen: false
})
// 可选：暴露更新方法，保持调用语义清晰
export function updateBus(key, value) {
busState[key] = value
}
export function useBus() {
return busState
}
任何组件都可导入 useBus 直接读写，修改即响应。不需要 emit/on，天然响应式。
进阶提示：配合 defineModel（Vue 3.4+）简化表单同步
若多个组件需同步编辑同一字段（如搜索关键词），除了共享 state，还可让子组件用 defineModel() 声明双向绑定 prop，父组件传入共享字段即可实现“一处输入，多处响应”：
- 父组件传
:search-keyword="shared.searchKeyword" - 子组件用
const searchKeyword = defineModel('searchKeyword') - 输入框绑定
v-model="searchKeyword"，自动同步到 shared
