Vue依赖注入实现全局消息提示队列，核心是顶层provide通知服务、子孙组件inject调用push/clear等方法，配合NotificationQueue.vue统一渲染，避免props透传与事件总线，确保单例、响应式与类型安全。
Vue 依赖注入实现全局消息提示队列，核心在于：在应用顶层（如 main.ts 或 App.vue）用 provide 注入一个可管理的通知服务，所有子孙组件通过 inject 拿到该服务实例，直接调用 push()、clear() 等方法——无需引入、无需 props 透传、不依赖 Pinia 或事件总线。
1. 构建一个类型安全的通知服务类
先定义一个结构清晰、支持队列、去重、自动关闭的消息服务：
- 用
ref管理当前待显示的提示列表（响应式） - 每个消息含
id、type、content、duration、onClose等字段 - 提供
push(msg)添加、remove(id)移除、clear()清空等方法 - 内部启动定时器自动关闭过期消息（可选）
2. 在应用入口统一 provide
在 main.ts 中创建并注入服务实例：
- 调用
createApp(App)后，立即app.provide('notification', notificationService) - 确保该服务是单例（不要在组件内重复 new）
- 若使用 TypeScript，建议用 Symbol 作为注入键避免命名冲突：
const NotificationSymbol = Symbol('notification')
3. 子孙组件中 inject 并直接使用
任意深层组件（比如 UserDetail.vue 或 OrderForm.vue）均可一键调用：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
- 导入
inject和对应的 Symbol（或字符串键） -
const notify = inject(NotificationSymbol)或inject('notification') - 直接
notify.push({ type: 'success', content: '保存成功' }) - 无需判断是否存在——可在
inject第二参数设默认值或工厂函数兜底
4. 配合 UI 层统一渲染
另建一个 NotificationQueue.vue 全局挂载组件：
- 它也
inject同一服务，监听messagesref 变化 - 负责定位、堆叠、动画、点击关闭、超时销毁等 UI 逻辑
- 只管展示，不参与业务触发——职责分离，便于测试和替换
这种方式既避开 prop 逐层透传，又比事件总线更可控，比全局挂载 $notify 更符合 Composition API 设计哲学。关键点在于服务实例必须唯一、响应式状态要正确传递、注入名保持一致。
