Vue3全局依赖注入：如何在依赖内部通过provide/inject注入其他依赖？

你遇到的核心问题是：inject() 只能在Vue组件的setup函数、生命周期钩子，或者被这些上下文调用的函数中生效，直接在main.ts的全局代码里调用inject()会返回undefined，因为此时没有Vue组件上下文。

下面提供两种可行的解决方案：

方案一：手动实例化并传递依赖（最简单直接） #

既然已经在main.ts里创建服务实例，完全可以先实例化依赖的服务，再把它传入需要依赖的服务构造函数，最后统一provide：

// main.ts
export class MyService1 {
    constructor() {}
}

export class MyService2 {
    constructor(readonly myService1: MyService1) {}
}

const app = createApp(App);

// 先实例化依赖的服务
const myService1 = new MyService1();
// 把实例传入依赖它的服务
const myService2 = new MyService2(myService1);

// 再统一提供给应用
app.provide("MyService1", myService1);
app.provide("MyService2", myService2);

app.mount('#app');

这种方式不需要依赖Vue的inject系统来传递服务间的依赖，逻辑清晰，适合大多数场景。

方案二：利用工厂函数延迟服务初始化（适合需要在组件上下文获取依赖的场景） #

如果你的服务需要在组件内部才能获取某些依赖（比如需要访问组件的inject内容），可以把服务包装成工厂函数，在组件内部调用时再初始化：

// main.ts
export class MyService1 {
    constructor() {}
}

export class MyService2 {
    constructor(readonly myService1: MyService1) {}
}

const app = createApp(App);

app.provide("MyService1", new MyService1());
// 提供工厂函数，而不是直接提供实例
app.provide("MyService2", () => {
  // 这里的inject会在组件调用工厂函数时生效（此时有组件上下文）
  const myService1 = inject("MyService1") as MyService1;
  return new MyService2(myService1);
});

app.mount('#app');

然后在组件中使用时，调用工厂函数获取实例：

// SomeComponent.vue
<script setup>
const createMyService2 = inject("MyService2") as () => MyService2;
const myService2 = createMyService2();
</script>

如果希望服务是单例的，可以在工厂函数内部做缓存：

// main.ts
let myService2Instance: MyService2 | null = null;
app.provide("MyService2", () => {
  if (!myService2Instance) {
    const myService1 = inject("MyService1") as MyService1;
    myService2Instance = new MyService2(myService1);
  }
  return myService2Instance;
});

为什么你的原代码不生效？ #

inject() 的底层依赖Vue的组件实例上下文，只有当代码运行在组件的setup、生命周期钩子，或者由这些上下文触发的函数中时，才能获取到provide的值。而你在main.ts的全局代码中直接调用inject()，此时没有任何组件实例被创建，自然返回undefined。

内容的提问来源于stack exchange，提问作者Lucas Moraes