@Inject 不能在 vue 中使用 typescript

Question

我正在嘗試如下在 vue 中注入服務。

在更多信息.component.ts

@Inject('moreInformationService') private moreInformationService: () => MoreInformationService;

在更多信息.service.ts

import axios from 'axios';
import { Store } from 'vuex';
export default class MoreInformationService {
  constructor(private $store: Store<any>) {
  }    
}

但是我在控制台中得到以下警告，它沒有按預期工作

webpack-internal:///./node_modules/vue/dist/vue.esm.js:629 [Vue warn]: Injection "moreInformationService" not found

found in

---> <MoreInformation> at src/main/webapp/app/MSB/products/more-information/more-information.vue
       <BlankLayout> at src/main/webapp/app/MSB/layouts/BlankLayout.vue
         <App> at src/main/webapp/app/app.vue
           <Root>

Answer 1

我忘記使用provide注冊服務

以下更改解決了我的問題，

import MoreInformationService from '@/products/more-information/more-information.service';

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  router,
  provide: {
    moreInformationService: () => new MoreInformationService(store)
  },
  store
});

如果有更好的選擇，請回答。