Как сделать пользовательский декоратор глобально доступным для приложения vue.js 2? - PullRequest
Новая
       17

Как сделать пользовательский декоратор глобально доступным для приложения vue.js 2?

0 голосов
/ 09 апреля 2019

Я создал декоратор машинописного текста, который добавляет некоторые дополнительные аргументы к переданному методу. Он работает совершенно нормально без декоратора с использованием дополнительных параметров. В большинстве случаев эти параметры не нужно передавать, но время от времени эти параметры необходимо передавать.

Однако я вижу, что другие разработчики не знают, какой другой аргумент нужно передать, если они не видят реализацию или jsdoc метода, с которым им не следует беспокоиться.

Поэтому я создал декоратор, который будет добавлять параметры в правильном порядке и правильном состоянии. Все работает отлично, но теперь все должны помнить, чтобы добавить дополнительный импорт в MyDecorator. Поэтому я хочу сделать этот декоратор доступным во всем мире.

Также в нашем приложении мы используем декораторы для создания компонентов, реквизита, геттера, действия. Было бы хорошо, если бы я мог сделать это тоже глобальным. Почти все наши компоненты используют их, и каждый раз вводить импорт - это просто шаблон. (ничего страшного в этом нет, просто всем нам легче)

Это пример синтаксиса компонента приложения с декоратором в псевдокоде. 

<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>

Как все компоненты vue могут получить доступ к декораторам без использования импорта? Возможно ли это?

1 Ответ

1 голос
/ 10 апреля 2019

После комментария @ 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>
...