如何使用 TypeScript 在 Vue.js 中使用提供/注入

Question

我将 Vue.js 与 TypeScript 和vue-property-decorator包一起使用。根据文档，理论上我可以做这样的事情：

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. 我该如何设置？

Answer 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)
});

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