vue响应式全局状态订阅推荐provide/inject搭配ref或reactive：根组件provide响应式数据，子组件inject直接读写，修改即触发更新；避免globalproperties非响应式缺陷及事件总线误用于视图驱动。

Vue响应式数据实现全局状态订阅，不依赖Pinia或Vuex，核心是利用框架原生能力构建轻量、可控的跨组件通信机制。关键不在“全局”本身，而在“响应式订阅”的建立与更新链路是否完整——即状态变化能自动触发依赖它的所有组件重新计算。

用 provide / inject 搭配 ref 或 reactive

这是 Vue 3 最推荐的原生方案，适合中低复杂度应用：

• 在根组件（如 App.vue）的 setup 中，用 ref 或 reactive 创建响应式状态，再通过 provide 暴露一个唯一 key（字符串或 Symbol）和对应值
• 任意深层子组件中调用 inject('key') 获取该响应式引用，直接读写 .value 或属性即可
• 无需额外包装：ref/reactive 本身已具备响应性，inject 返回的就是原始响应式对象，修改会立即触发依赖它的模板或 computed 更新
• 注意：provide 的值必须在组件创建时确定；若需动态更新整个状态对象，建议用 reactive 包裹一个对象，而非多次 provide 多个 ref

用 createApp().config.globalProperties 挂载简易 store

适用于 Vue 2 风格迁移或极简共享逻辑（非强响应式场景）：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 在 main.js 中，用 app.config.globalProperties.$store = reactive({ count: 0 }) 挂载
• 组件中通过 this.$store 访问（Options API），或在 setup 中用 getCurrentInstance().proxy.$store（不推荐，耦合性强）
• ⚠️ 缺点明显：this.$store 不是响应式代理，需确保内部是 reactive/ref；且无法在 script setup 中自然解构，类型提示弱
• 仅建议用于只读配置、工具函数等非状态驱动场景

手动维护一个响应式事件总线（基于 ref + onUnmounted）

当需要“发布-订阅”语义，又不想引入 mitt 等库时可手写：

• 创建一个 const bus = reactive({ listeners: {} })
• 封装 on(event, cb)：将回调存入 bus.listeners[event] 数组，并在组件卸载时自动清理（配合 onUnmounted）
• 封装 emit(event, payload)：遍历对应事件的回调并执行
• 关键点：bus 本身是 reactive，但事件回调数组的增删不会触发视图更新——所以这个 bus 不用于驱动模板，而是作为副作用协调器
• 适合处理跨层级通知（如“用户登出”，“主题切换”），不替代状态存储

避免踩坑的几个细节

这些看似小的点，常导致“明明改了值，视图却不更新”：

• inject 返回值必须在 setup 顶层调用，不能包裹在函数或条件中，否则失去响应性追踪
• provide 的值如果是普通对象，需用 reactive 包裹；若只是单个值，ref 更直观
• 不要在 provide 里传箭头函数或未绑定 this 的方法——它们不持有响应式上下文
• inject 默认返回 undefined，建议始终提供默认值（inject('key', defaultValue)），防止运行时报错

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