@Inject在打字稿中无法正常工作

Question

我正在尝试按以下方式在vue中注入服务。

more-information.component.ts

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

more-information.service.ts

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

但是在控制台中出现了以下Waring，并且无法按预期运行

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

如果有更好的选择，请回答。