vue.js 2 앱에서 커스텀 데코레이터를 글로벌하게 사용하려면 어떻게 해야 합니까?

vue.js 2 앱에서 커스텀 데코레이터를 글로벌하게 사용하려면 어떻게 해야 합니까?

전달된 메서드에 인수를 추가하는 타이프스크립트 데코레이터를 만들었습니다.옵션 파라미터를 사용하여 데코레이터 없이도 완벽하게 동작합니다.대부분의 경우 이들 파라미터를 전달할 필요는 없지만 가끔 이들 파라미터를 전달할 필요가 있습니다.

그러나 다른 개발자는 이 메서드의 구현이나 jsdoc을 보지 않는 한 전달해야 할 다른 주장이 무엇인지 알 수 있습니다.

그래서 올바른 순서로 파라미터를 추가할 수 있는 데코레이터를 만들었습니다.모든 것이 정상 작동하지만, 이제 모두가 MyDecorator에 Import를 추가해야 한다는 것을 기억해야 합니다.그래서 저는 이 데코레이터를 전 세계에 보급하고 싶습니다.

또한 앱에서는 컴포넌트, 소품, 게터, 액션을 만들기 위해 데코레이터를 사용하고 있습니다.이것도 글로벌하게 하면 좋을 것 같아요.거의 모든 부품이 그것들을 사용하며 매번 수입하는 것은 단지 보일러 플레이트일 뿐입니다.(문제 없습니다.우리 모두가 쉽게 할 수 있습니다)

이것은 앱의 컴포넌트 구문을 유사 코드로 데코레이터를 사용한 예입니다.

<script lang="ts">
  import { Vue, Component, Prop, Emit } from 'vue-property-decorator';
  import { MyDecorator } from './src/utils';
  import { Getter } from 'vuex-class';

  @Component({})
  export default class MyComponent extends Vue {
    @Getter('something', { namespace: 'whatever' })
    something: number;

    mounted() {
      @MyDecorator()
      doSomething('do it please');
    }
  }
</script>

Import를 사용하지 않고 모든 vue 컴포넌트가 데코레이터를 사용할 수 있도록 하려면 어떻게 해야 합니까?가능합니까?

@LSHAPZ의 코멘트를 듣고 보니 플러그인으로도 할 수 있더군요.그래도 Vue를 수입해야 하는데.

import { Component } from 'vue-property-decorator';
import { MyDecorator } from '@/src/utils';

const MyPlugin: any = {};
MyPlugin.install = (Vue, options) => {

   Vue.Awesome =  Component; // this I will never use as it will require to edit all files in my project

   Vue.MyDecorator = MyDecorator;
   Vue.prototype.MyProtoDecorator = MyDecorator;
};
// the MyPlugin can be placed on another file and exported    

Vue.use(MyPlugin);

사용방법:

<script lang="ts">
    import { Vue } from 'vue-property-decorator';
    import { Getter } from 'vuex-class';

    @Vue.Awesome({}) // this is to show it is possible. Not practical
    export default class MyComponent extends Vue {
    @Getter('something', { namespace: 'whatever' })
    something: number;

    mounted() {
      @Vue.MyDecorator() // this is the thing that is practical for my case
      doSomething('done it somehow');

      @this.MyProtoDecorator() // second way
      doSomething('done again');

    }
  }
</script>

언급URL : https://stackoverflow.com/questions/55594831/how-to-make-a-custom-decorator-globally-available-to-a-vue-js-2-app