我创建了一个Typescript装饰器,该装饰器将一些其他参数添加到所传递的方法中。无需装饰器使用可选参数,它就可以正常工作。在大多数情况下,不需要传递这些参数,但有时需要传递这些参数。
但是,我看到其他开发人员不知道要传递的其他参数是什么,除非他们看到了该方法的实现或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组件都能获得装饰器?有可能吗?
答案 0 :(得分:1)
在@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>