typescript - 使用装饰器在 vue 3 中注入值未定义

Question

我正在尝试使用 tsyringe 在 Vue 3 中进行依赖注入，但是当我注入我的组件时，我得到了一个“未定义”值，这里是代码：

// TYPES.ts
export const TYPES = {
    WARRIOR: Symbol.for("Warrior"),
    WEAPON: Symbol.for("Weapon"),
    CONTAINER: Symbol.for("GlobalContainer"),
}


// globalcontainer.ts
import "reflect-metadata";
import {container as globalContainer, DependencyContainer} from "tsyringe";
import {TYPES} from "@/models/Types";
import {Warrior} from "@/interfaces/Warrior";
import {Weapon} from "@/interfaces/Weapon";
import {Ninja} from "@/models/Warrior";
import {Katana} from "@/models/Weapon";

globalContainer.register<Warrior>(TYPES.WARRIOR, Ninja);
globalContainer.register<Weapon>(TYPES.WARRIOR, Katana);
globalContainer.register<DependencyContainer>(TYPES.CONTAINER, {useValue: globalContainer})

export default globalContainer;

// app.Vue
provide: {
   [TYPES.CONTAINER]: globalContainer
  }

当我 console.log Vue 中的组件选项时，我从“vue-component-decorator”复制粘贴插件装饰器，

我有

inject: {
  _container: Symbol("GlobalContainer"),
}

但是当我在生命周期中调用它时created，我得到了未定义，这就是我如何称呼它

// Home.vue
import { Options, Vue } from "vue-class-component";
import { DependencyContainer } from "tsyringe";
import { Inject } from "@/configs/InjectDecarator";

export default class Home extends Vue {

  @Inject(TYPES.CONTAINER)
  private _container!: DependencyContainer;
  
  created() {
    console.log(this._container!); // undefined
  }
}

是否有任何选项可以调用此组件的提供？我的提供者是

[TYPES.CONTAINER]: globalContainer

我在这里使用 ts

标签： typescriptvue.jsvue-componentvuejs3