如何在带有 TypeScript 的 Vue.js 中使用提供/注入答案

【问题标题】：How to use Provide/Inject in Vue.js with TypeScript如何在带有 TypeScript 的 Vue.js 中使用提供/注入
【发布时间】：2018-04-06 07:47:24
【问题描述】：

我正在使用带有 TypeScript 和 the vue-property-decorator 包的 Vue.js。根据文档，理论上我可以做这样的事情：

import { Component, Inject, Provide, Vue } from 'vue-property-decorator'

const s = Symbol('baz')

@Component
export class MyComponent extends Vue {
  @Provide() foo = 'foo'
  @Provide('bar') baz = 'bar'

  @Inject() foo: string
  @Inject('bar') bar: string
  @Inject(s) baz: string
}

但是，如果我想在不是组件的类上使用 @Provide 和 @Inject 怎么办？例如，如果我有 ComponentA，它依赖于 ServiceA，它依赖于 ServiceB。我该如何设置？

【问题讨论】：

标签： typescript vue.js vuejs2 vue-component

【解决方案1】：

您可以使用@Provide 装饰器从较高的组件中提供您想要的任何东西，然后使用@Inject 在较低的组件中请求它。例如：

在父组件中，您使用 @Provide(<someKey>) 提供值

//Parent.vue
<template>
  <div>The parents value: {{this.providedValue}}</div>
  <child />
</template>

<script lang="ts">
  import { Component, Vue, Provide} from 'vue-property-decorator';
  import Child from './Child.vue';

  @Component({components: Child})
  export default class Parent extends Vue {
    @Provide('key') private providedValue: string = 'The value';
  }
</script>

现在我们已经声明了一个名称为 key 的值，它可以被所有子级使用，深度为多个级别：

//Child.vue
<template>
  <div>The childs value: {{this.injectedValue}}</div>
</template>

<script lang="ts>
  import { Component, Vue, Inject } from 'vue-property-decorator';

  @Component
  export default class Child extends Vue {
    @Inject('key') private injectedValue!: string;
  }
</script>

属性 injectedValue 现在将由 Vue 通过向上遍历层次结构注入，直到找到带有键 key 的提供值。

如果您想要类似依赖注入的东西，最好在顶部提供值，您可以在其中创建 Vue 实例：

//index.ts
import Vue from 'vue';
//... imports and configs
new Vue({
  el: '#app',
  // Provide values by returning a key-value pair
  provide: () => ({
    'key1': 'value1',
    'key2': 'value2'
  }),
  render: h => h(App)
});

现在你可以在这个 vue 实例的任何组件中使用@Inject('key1')。

【讨论】：

刚刚注意到我没有完全阅读您的问题。对于嵌套服务，您需要某种依赖注入容器。然后，您可以在顶层提供您的容器并使用它来解析您的服务。

【解决方案2】：

你可以使用 vue 3 和 class 样式组件，那么你必须通过这种方式定义 provider/inject：

在 vue 3 中，除了 Component 注解之外，还有 Options 注解，我们使用它来定义提供/注入参数。 More info

// Parent component
import { Vue, Options } from "vue-class-component";
import { computed } from "@vue/reactivity";

@Options({
  provide: {
    staticParameter: 'static value',
    reactiveParameter: computed(() => 'Normal computed value'),
  },
})
export default class ParentComponent extends Vue {}

// Child component
import { Vue, Options } from "vue-class-component";

@Options({
  inject: ["staticParameter", "reactiveParameter"],
})
export default class Timer extends Vue {
  staticParameter!: string;
  reactiveParameter!:string
}

【讨论】：