Vue 依赖注入如何实现多租户系统配置信息在组件树中的全局共享

Vue依赖注入结合app.provide与响应式对象可安全实现多租户配置的统一分发与隔离：通过租户感知工厂、key隔离provide、响应式容器及封装控制逻辑，满足唯一标识、动态加载、数据隔离与响应更新等核心要求。

Vue 依赖注入本身不是全局共享机制，但结合 app.provide 和响应式对象，可以安全、高效地实现多租户系统配置信息在组件树中的统一分发与隔离使用。

多租户配置需满足的核心要求

多租户场景下，配置信息通常具备以下特点：租户标识唯一、配置内容动态加载、不同租户间数据必须隔离、组件需能响应配置变更。依赖注入不能直接“跨树”共享，但可通过应用级注入 + 租户上下文封装来达成目标。

1. 配置应随租户切换实时生效，且不污染其他租户实例
2. 后代组件无需关心租户来源，只需按需 inject 配置字段
3. 避免把租户 ID 硬编码进每个 provide 调用，而是集中管控
4. 配置对象需保持响应式，确保 UI 自动更新

用 app.provide 注入租户感知的配置工厂

不要直接 provide 原始配置对象，而是提供一个函数或 reactive 包装器，让 inject 方按需获取当前租户配置。这样既利用了 app.provide 的全应用可达性，又保留了运行时灵活性。

1. 在应用初始化时（如 main.js），调用 app.provide('tenantConfig', () => getCurrentTenantConfig())
2. 或提供一个响应式容器：const tenantStore = reactive({ config: null }); app.provide('tenantStore', tenantStore)
3. 配合路由守卫或登录后钩子，动态设置 tenantStore.config = loadedConfig
4. 所有组件通过 const { config } = inject('tenantStore') 访问，天然响应更新

按租户 key 隔离 provide，避免跨租户污染

若系统存在多个并行租户上下文（如微前端嵌套、多标签页独立租户），不应只依赖单个 app 实例。此时应在租户入口组件（如 TenantWrapper）中使用组件级 provide，以租户 ID 为 key 进行隔离。

1. 例如：provide(`tenant:${tenantId}`, { theme, apiBase, features })
2. 后代组件 inject 时指定对应 key：inject(`tenant:${activeTenantId}`)
3. 这样即使两个租户组件树并存，也不会互相覆盖 —— 就近覆盖规则保障了作用域边界
4. 适合 SaaS 平台中「同一页面展示多个租户仪表盘」的场景

注入配置的同时暴露租户变更能力

配置不只是只读数据。业务组件常需触发租户切换、刷新配置或校验权限。建议将配置对象与控制逻辑一起 provide。

1. provide 内容可设计为：{ config, reload, setTenant, isReady }
2. inject 后解构使用：const { config, setTenant } = inject('tenantContext')
3. 避免后代组件直接修改 config 值，而是调用 setTenant(id) 触发完整生命周期（加载、校验、通知）
4. 配合 readonly(config) 可进一步防止意外篡改