vue跨组件共享响应式数据的核心方案是provide/inject+reactive，配合模块级全局状态和可复用组合式函数，兼顾轻量性、类型安全与多实例隔离。
用 provide/inject + reactive 封装状态仓库（推荐嵌套组件）
这是最清晰、可控、无额外依赖的方式。父组件创建一个 reactive 对象 并通过 provide 注入，所有后代组件都能 inject 使用，读写自动触发更新。
- 在
src/composables/useSharedState.js中定义可复用的状态逻辑：
import { reactive } from 'vue'
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 { provide } from 'vue'
import { useSharedState } from './composables/useSharedState'
setup() {
const shared = useSharedState()
provide('shared', shared)
return () =>
}
- 任意子组件中直接注入并使用（无需解构，保持响应式）：
import { inject } from 'vue' 主题：{shared.theme}｜未读：{shared.unreadCount}
setup() {
const shared = inject('shared')
// 修改会同步到所有使用它的组件
shared.unreadCount++
shared.setUserInfo({ name: '张三', id: 1002 })
return () =>
}
用模块级 reactive/ref 全局状态（适合少量顶层共享）
当几个组件只是偶尔读写同一份简单状态（比如侧边栏开关、全局计数器），可直接导出一个模块级响应式对象，避免层层 provide。
- 新建
src/globalState.js：
import { reactive, ref } from 'vue'
export const appState = reactive({ sidebarOpen: false, currentTab: 'dashboard' })
export const globalCount = ref(0)
- 组件中导入使用（注意：不能直接解构赋值，否则丢失响应式）：
import { appState, globalCount } from '@/globalState'
import { toRefs } from 'vue'
setup() {
return { ...toRefs(appState), globalCount }
}
按需封装组合式函数（提升复用与类型安全）
把共享逻辑进一步封装成带类型提示的 composable，既支持 TS 自动推导，又便于单元测试和多实例隔离。
- 例如支持多画布场景的大屏设计器，可为每个画布实例创建独立状态：
export function useCanvasState(canvasId) {
const state = reactive({
selectedComponent: null,
zoom: 1,
dataSources: {}
})
return { ...toRefs(state), updateZoom(newZoom) { state.zoom = newZoom } }
}
- 每个画布组件调用
useCanvasState(id)，彼此状态互不干扰。
注意事项与避坑点
这些细节容易导致响应式失效或维护困难：
- inject 返回值必须是响应式对象本身，不要对它做浅拷贝或结构赋值（如
const { count } = inject('store')会丢失响应式） - provide 的键名建议用 Symbol 避免命名冲突，尤其在插件或 UI 库中
- 动态挂载组件（如弹窗、拖拽新增图表）时，确保 inject 在 setup 执行时已存在；必要时用
inject(..., undefined, false)配合条件判断 - 全局 reactive 对象不适合高并发修改场景，复杂业务仍建议用 Pinia 分域管理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
