最轻量实用的Vue响应式数据跨组件共享方式是组合式API + provide/inject + reactive封装状态仓库。它无需额外依赖、逻辑清晰、更新自动同步，适合中小型项目或局部状态管理；核心是父组件provide reactive对象，后代组件inject使用，读写均保持响应式。
Vue 响应式数据跨组件共享，不依赖 Vuex，最轻量实用的方式是组合式 API + provide/inject + reactive 封装状态仓库。它无需额外依赖、逻辑清晰、更新自动同步，适合中小型项目或局部状态管理。
用 provide/inject 共享响应式状态（推荐用于有嵌套关系的组件）
核心是把一个 reactive 对象在父组件中 provide 出去，后代任意层级组件都能 inject 使用，读写都保持响应式。
- 在
src/composables/useSharedState.js中定义可复用的状态：
export function useSharedState() {
return reactive({
userInfo: { name: '', id: null },
theme: 'light',
unreadCount: 0,
setUserInfo(user) { this.userInfo = user },
toggleTheme() { this.theme = this.theme === 'light' ? 'dark' : 'light' }
})
}
- 在顶层组件（如
App.vue）中提供：
import { useSharedState } from './composables/useSharedState'
export default {
setup() {
const shared = useSharedState()
provide('shared', shared)
return () => <router-view/>
}
}
- 任意子组件中直接注入并使用：
export default {
setup() {
const shared = inject('shared')
// 修改会触发所有使用它的组件更新
shared.unreadCount++
shared.setUserInfo({ name: '李四', id: 1001 })
return () => <p>未读：{shared.unreadCount}</p>
}
}
用全局 reactive 对象（适合少量顶层共享数据）
当不需要严格父子链路，只是几个组件偶尔读写同一份简单状态时，可直接导出一个模块级 reactive 或 ref。
- 新建
src/globalState.js：
export const appState = reactive({
sidebarOpen: false,
currentTab: 'home'
)
export const globalCount = ref(0)
- 组件中按需导入使用（注意：必须用
toRefs或解构时保持响应式）：
import { toRefs } from 'vue'
export default {
setup() {
return { ...toRefs(appState), globalCount }
}
}
兄弟组件通信：用 mitt 或状态提升
没有共同父级又不是深层嵌套时，provide/inject 不适用，可用以下两种方式：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- mitt（轻量事件总线）：比 Vue2 的 Event Bus 更安全，支持手动解绑
-
状态提升到最近共同父组件：父组件持有状态，通过 props 传给子组件，再用
$emit或defineEmits回传变更 —— 简单、可控、无副作用
例如两个兄弟组件 A 和 B，都从父组件接收 activeTab 并触发切换，父组件统一管理，避免状态分散。
不建议单独用普通对象或 JSON 导出
像 export default { userInfo: {...} } 这类静态对象不具备响应式，组件中修改不会触发视图更新；即使配合计算属性，也无法监听深层变化。必须借助 reactive、ref 或其衍生机制才能保证响应式穿透。
