Provide/Inject 是 Vue 推荐的依赖注入方案，用于将封装好的 API 实例透传至深层子组件，避免硬编码和 props 层层传递，提升可测试性、可配置性与多环境适配能力。
在 Vue 组件库开发中，避免硬编码 API 调用（如直接 import axios 或调用 window.$http）是提升可测试性、可配置性和多环境适配能力的关键。Provide / Inject 是 Vue 官方推荐的“依赖注入”方案，它能将统一的 API 实例（如封装好的请求服务）安全、灵活地透传给深层子组件，彻底解耦组件与具体请求实现。
为什么不用 props 层层传递？
props 适合显式、短链路的数据流；而 API 实例属于“基础设施级依赖”，可能被十几层深的子组件使用。逐层传递不仅冗余，还破坏组件封装性——每个中间组件都得声明 props 接收并转发，违背“组件只关心自身职责”的设计原则。
如何用 provide 注入 API 实例？
核心思路：在应用根组件或组件库入口处 provide 一个已初始化的 API 对象，子组件通过 inject 拿到它，无需 import 具体实现。
-
定义统一 API 类（例如 api/index.ts）：
封装 axios 实例 + 拦截器 + 常用方法（get/post/put/delete），支持传入 baseURL、token 等配置。 -
在根组件 setup 中 provide：
import { provide, InjectionKey } from 'vue'
import { createApi } from '@/api'
const ApiKey = Symbol('api') as InjectionKey>
const api = createApi({ baseURL: '/api' })
provide(ApiKey, api) -
在任意子组件中 inject 使用：
import { inject, InjectionKey } from 'vue'
import { ApiKey } from '@/api'
const api = inject(ApiKey)
if (!api) throw new Error('API not provided')
api.get('/users')
解决组件库“全局接口”痛点的关键点
传统组件库常依赖 window.xxxApi 或 require('xxx-api')，导致无法独立运行、难以 mock、环境切换困难。Provide 方案从三方面破局：
- 可替换性：不同项目可传入不同配置的 api 实例（如测试环境用 mock adapter，生产环境走真实后端）。
- 可隔离性：多个组件库实例可各自提供独立 API（如嵌套微前端场景），互不污染。
- 可测试性：单元测试时，直接 provide 一个 mock api 对象，无需 patch 全局变量或 mock 模块。
进阶建议：配合 defineComponent 和 TypeScript 更稳
为避免类型丢失和运行时错误，推荐：
- 用 Symbol 作为 injection key，而非字符串，防止命名冲突；
- 在 provide 侧明确标注类型（如 provide
(ApiKey, api)）； - inject 时启用 required: true 或手动判空，避免隐式 undefined；
- 对复杂 API 实例，考虑拆分为多个 key（如 ApiKey、AuthKey、NotifyKey），按需注入，降低耦合。
