Vue.js跨组件状态共享需共享同一响应式引用：①provide/inject配reactive对象，用Symbol键防冲突，inject后用toRefs保响应性；②ES模块导出全局ref/reactive；③组合式函数useXxx封装状态与逻辑，支持TS类型推导；须避免解构赋值、普通对象注入等导致响应式失效。

Vue.js 跨组件状态共享要真正响应式，关键不是“传数据”，而是“共享同一份响应式引用”。只要多个组件访问的是同一个 ref 或 reactive 实例，修改就会自动同步，无需手动触发更新。

用 provide/inject 共享 reactive 对象（适合嵌套组件）

这是最贴近 Vue 设计哲学的轻量方案，天然支持深层嵌套、方法调用和响应式更新。

• 在顶层组件（如 App.vue）中创建 reactive 状态，并通过 provide 注入，key 推荐用 Symbol 避免冲突
• 后代任意层级组件用 inject 获取，可直接读写属性或调用内部方法（如 toggleTheme()）
• 注意：inject 返回的是响应式代理，解构时建议用 toRefs 或保持对象访问，避免丢失响应性
• 适合主题配置、表单上下文、用户会话等“一对多”且有明确祖先链路的场景

导出全局 reactive/ref（适合小项目或局部共享）

利用 ES 模块单例特性，直接在 JS 文件中定义并导出响应式变量，所有导入处指向同一内存地址。

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

• 用 reactive 封装对象状态（如 userStore），比多个 ref 更易维护；用 ref 封装基础值（如 count）
• 组件中 import 后可直接使用，但模板里引用 ref 需加 .value，reactive 对象可直接解构（Vue 3.4+ 支持）
• 不依赖组件层级，但需警惕命名污染和状态边界模糊——仅推荐用于少量、明确、低耦合的数据

封装组合式函数统一管理（提升复用与类型安全）

把状态 + 逻辑打包成 useXxx 函数，既保持响应式，又便于测试、复用和 TypeScript 类型推导。

立即学习“前端免费学习笔记（深入）”；

• 函数内部 return reactive 或 ref，确保每次调用返回的是新响应式对象；若需全局唯一，则在函数外创建单例实例
• 配合 provide/inject 使用时，useSharedState() 只负责构造状态，注入由父组件控制，职责清晰
• 在 TypeScript 中可为 inject 添加泛型约束，如 inject(storeKey)，提升开发体验

避免常见陷阱

响应式失效往往不是 API 用错，而是引用被切断。

• 不要对 inject 返回值做普通对象赋值（如 const { name } = shared；name = 'new'），这会丢失响应性
• 不要在 setup 中多次调用同一个 useXxx 函数期望共享状态——每个调用都新建一份响应式数据
• provide 的值必须是 ref/reactive/computed，普通对象或原始值注入后无法触发更新
• inject 默认值不能是 ref，否则会失去响应性；如需默认值，应在 provide 侧处理，而非 inject 侧 fallback