vue组件间响应式数据共享的关键是共用同一响应式引用。provide/inject+reactive适用于嵌套组件；模块级reactive/ref适合简单直连；mitt用于非嵌套组件事件通知；pinia适用于中大型项目全局状态管理。

Vue 响应式数据在组件间共享与同步，关键不在“传”，而在“共用同一响应式引用”。只要多个组件访问的是同一个 reactive 或 ref 实例，修改就会自动同步，无需手动触发更新或事件广播。

用 provide/inject + reactive 实现嵌套组件共享

这是最常用、最可控的轻量方案，适合布局组件（如 App、Layout）与其后代组件之间的状态协作。

• 在顶层组件 setup 中创建 reactive 对象，并通过 provide 注入，键名建议用 Symbol 或字符串常量避免冲突
• 子组件 inject 获取时，不能解构赋值（如 const { count } = inject('store') 会丢失响应式），必须保持原始引用
• 可将 reactive 封装为组合式函数（如 useSharedState），便于复用、测试和类型推导
• 适合管理用户信息、主题模式、全局开关等中低频变更的共享状态

用模块级 reactive/ref 实现任意组件直连

当几个组件位置分散但只需读写少量状态（比如侧边栏开关、通知计数），可跳过 provide/inject，直接导出响应式变量。

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

• 在独立文件（如 src/stores/global.js）中定义 export const appState = reactive({ sidebarOpen: false })
• 所有导入该模块的组件，拿到的是同一个响应式对象，修改立即同步
• 注意：不要在 setup 中对导入的 reactive 对象做结构赋值；若需解构，用 toRefs 包裹
• 适合简单场景，但不推荐用于复杂业务逻辑——缺乏封装性，易导致状态被随意修改

用 mitt 或自定义事件处理非嵌套/兄弟组件通信

provide/inject 只适用于祖先-后代关系；兄弟或跨层级无依赖组件，需借助事件机制实现“间接同步”。

• 安装 mitt：npm install mitt，创建 eventBus 实例并导出
• 发送方调用 bus.emit('update-user', payload)，接收方用 bus.on('update-user', handler) 响应
• 这种方式本身不传递响应式，需在 handler 中手动更新本地 reactive 数据，才能触发视图更新
• 适合一次性通知（如弹窗关闭、表单提交成功），不适合高频、双向、状态驱动的协作

用 Pinia 管理中大型项目的全局状态

当共享状态变多、逻辑变重、需要调试、持久化或严格类型约束时，Pinia 是 Vue 3 官方推荐的成熟方案。

• 每个 store 是独立的响应式对象，支持 actions（含异步）、getters、插件扩展
• 组件中使用 useXXXStore() 获取 store 实例，直接读写 state 或调用 action，天然响应式
• 自动支持 TypeScript，devtools 集成完善，支持 SSR 和服务端预取
• 不是“替代 reactive”，而是基于 reactive 的更高层抽象，本质仍是响应式同步

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