如何在vue.js 2应用程序中全局使用自定义装饰器？

Posted 2023-01-18

我创建了一个typescript装饰器，它为传递的方法添加了一些额外的参数。没有装饰器使用可选参数，它完全正常工作。大多数情况下，不需要传递这些参数，但偶尔需要传递这些参数。

但是我看到其他开发人员不知道要传递的其他参数是什么，除非他们看到方法的实现或jsdoc，他们不应该关注它。

所以我创建了一个装饰器，它将以正确的顺序和正确的状态添加参数。一切正常但是现在每个人都必须记住向MyDecorator添加额外的导入。所以我想让这个装饰器在全球范围内可用。

同样在我们的应用程序中，我们使用装饰器来创建组件，道具，getter，动作。如果我能做出这些全球性的话会很好。几乎所有组件都使用这些组件并且每次都进行导入只是样板。 （没有错，只是让我们所有人都更容易）

这是应用程序的组件语法与伪代码中的装饰器的示例。

<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组件如何在不使用导入的情况下获得装饰器？可能吗？

答案

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