Vue Class Decorator

This library is modified base on vue-property-decorator

& Fully depends on vue-class-component, so please read its README before using this library.

License

MIT License

Install

1npm i -S vue-class-decorator

Usage

There are 7 decorators and 1 function (Mixin):

• @FunctionalVue
• @Filter
• @On
• @Once
• @Mounted
• @Cache
• @NoCache
• @Emit (from vue-property-decorator)
• @Inject (from vue-property-decorator)
• @Model (from vue-property-decorator)
• @Prop (from vue-property-decorator)
• @Provide (from vue-property-decorator)
• @Watch (from vue-property-decorator)
• @Component (from vue-class-component)
• Mixins (the helper function named mixins defined at vue-class-component)

Note: all the lifecycle hooks are supported

FunctionalVue class

1import { FunctionalVue, Component, Filter } from 'vue-class-decorator'

2
3@Component
4export default class YourComponent extends FunctionalVue {
5  //...
6}

is equivalent to

1export default {
2  functional: true
3  //...
4}

@Filter(name?: string) decorator

1import { Vue, Component, Filter } from 'vue-class-decorator'

2
3@Component
4export default class YourComponent extends Vue {
5  @Filter('date')
6  DateFilter(val: string) { }
7
8  @Filter()
9  date2(val: string) { }
10}

is equivalent to

1export default {
2  filter: {
3    date(val) {},
4    date2(val) {}
5  }
6}

@On(event?: string, reserve: boolean = true) decorator

NOTE: set reserve to false will delete method from vue instance

1import { Vue, Component, On } from 'vue-class-decorator'
2
3@Component
4export default class YourComponent extends Vue {
5  @On("change")
6  Handler(e) { 
7    //handler1
8  }
9
10  @On()
11  InputEvent(e) { 
12    //handler2
13  }
14
15  @On("resize", false)
16  Handler2(e) { 
17    //handler3
18  }
19}

is equivalent to

1export default {
2  methods: {
3    Handler(e) { 
4      //handler1
5    },
6    InputEvent(e) { 
7      //handler2
8    }
9  },
10  mounted() {
11    this.$on("change", this.Handler)
12
13    this.$on("input-event", this.InputEvent)
14
15    this.$on("resize", () => {
16      //handler3
17    })
18  }
19}

@Once(event?: string, reserve: boolean = true) decorator

NOTE: set reserve to false will delete method from vue instance

1import { Vue, Component, Once } from 'vue-class-decorator'
2
3@Component
4export default class YourComponent extends Vue {
5  @Once("change")
6  Handler(e) { 
7    //handler1
8  }
9
10  @Once()
11  InputEvent(e) { 
12    //handler2
13  }
14
15  @Once("resize", false)
16  Handler2(e) { 
17    //handler3
18  }
19}

is equivalent to

1export default {
2  methods: {
3    Handler(e) { 
4      //handler1
5    },
6    InputEvent(e) { 
7      //handler2
8    }
9  },
10  mounted() {
11    this.$once("change", this.Handler)
12
13    this.$once("input-event", this.InputEvent)
14
15    this.$once("resize", () => {
16      //handler3
17    })
18  }
19}

@Mounted(order?: number, args?: any[]) decorator

@Mounted(args?: any[]) decorator

The other lifecycle hooks are same

1import { Vue, Component, Mounted } from 'vue-class-decorator'
2
3@Component
4export default class YourComponent extends Vue {
5  @Mounted()
6  Method1() { 
7  }
8
9  @Mounted(2, ["test"])
10  Method2(a: string) {
11  }
12
13  @Mounted(1)
14  Method3() { 
15  }
16
17  @Mounted(["test"])
18  Method4(a: string) { 
19  }
20}

is equivalent to

1export default {
2  methods: {
3    Method1() { 
4    }
5    Method2(a) { 
6    }
7    Method3() { 
8    }
9    Method4(a) { 
10    }
11  },
12  mounted() {
13    this.Method3();
14    this.Method2("test");
15    this.Method1();
16    this.Method4("test");
17    //...
18  }
19}

@Cache(cache: boolean) decorator

1import { Vue, Component, Cache } from 'vue-class-decorator'

2
3@Component
4export default class YourComponent extends Vue {
5  @Cache()
6  get random () {
7    return Math.random()
8  }
9
10  // the computed property will not be cached
11  @Cache(false)
12  get random2 () {
13    return Math.random()
14  }
15}

@NoCache decorator

This is the alias for @Cache(false)

1import { Vue, Component, NoCache } from 'vue-class-decorator'

2
3@Component
4export default class YourComponent extends Vue {
5  // the computed property will not be cached
6  @NoCache
7  get random () {
8    return Math.random()
9  }
10}

@Prop(options: (PropOptions | Constructor[] | Constructor) = {}) decorator

1import { Vue, Component, Prop } from 'vue-class-decorator'
2
3@Component
4export default class YourComponent extends Vue {
5  @Prop(Number) propA!: number
6  @Prop({ default: 'default value' }) propB!: string
7  @Prop([String, Boolean]) propC: string | boolean
8}

is equivalent to

1export default {
2  props: {
3    propA: {
4      type: Number
5    },
6    propB: {
7      default: 'default value'
8    },
9    propC: {
10      type: [String, Boolean]
11    },
12  }
13}

Note that:

• reflect-metada isn't used in this library and setting emitDecoratorMetadata to true means nothing.
• Each prop's default value need to be defined as same as the example code shown in above.

@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {}) decorator

1import { Vue, Component, Model } from 'vue-class-decorator'

2
3@Component
4export default class YourComponent extends Vue {
5  @Model('change', { type: Boolean }) checked!: boolean
6}

is equivalent to

1export default {
2  model: {
3    prop: 'checked',
4    event: 'change'
5  },
6  props: {
7    checked: {
8      type: Boolean
9    },
10  },
11}

@Watch(path: string, options: WatchOptions = {}) decorator

1import { Vue, Component, Watch } from 'vue-class-decorator'

2
3@Component
4export default class YourComponent extends Vue {
5  @Watch('child')
6  onChildChanged(val: string, oldVal: string) { }
7
8  @Watch('person', { immediate: true, deep: true })
9  onPersonChanged(val: Person, oldVal: Person) { }
10}

is equivalent to

1export default {
2  watch: {
3    'child': {
4      handler: 'onChildChanged',
5      immediate: false,
6      deep: false
7    },
8    'person': {
9      handler: 'onPersonChanged',
10      immediate: true,
11      deep: true
12    }
13  },
14  methods: {
15    onChildChanged(val, oldVal) { },
16    onPersonChanged(val, oldVal) { }
17  }
18}

@Emit(event?: string) decorator

The functions decorated by @Emit $emit their return value followed by their original arguments. If the return value is a promise, it is resolved before being emitted.

If the name of the event is not supplied via the event argument, the function name is used instead. In that case, the camelCase name will be converted to kebab-case.

1import { Vue, Component, Emit } from 'vue-class-decorator'
2
3@Component
4export default class YourComponent extends Vue {
5  count = 0
6
7  @Emit()
8  addToCount(n: number) {
9    this.count += n
10  }
11
12  @Emit('reset')
13  resetCount() {
14    this.count = 0
15  }
16
17  @Emit()
18  returnValue() {
19    return 10
20  }
21
22  @Emit()
23  promise() {
24    return new Promise(resolve => {
25      setTimeout(() => {
26        resolve(20)
27      }, 0)
28    })
29  }
30}

is equivalent to

1export default {
2  data() {
3    return {
4      count: 0
5    }
6  },
7  methods: {
8    addToCount(n) {
9      this.count += n
10      this.$emit('add-to-count', n)
11    },
12    resetCount() {
13      this.count = 0
14      this.$emit('reset')
15    },
16    returnValue() {
17      this.$emit('return-value', 10)
18    },
19    promise() {
20      const promise = new Promise(resolve => {
21        setTimeout(() => {
22          resolve(20)
23        }, 0)
24      })
25
26      promise.then(value => {
27        this.$emit('promise', value)
28      })
29    }
30  }
31}

@Provide(key?: string | symbol) / @Inject(options?: { from?: InjectKey, default?: any } | InjectKey) decorator

1import { Component, Inject, Provide, Vue } from 'vue-class-decorator'
2
3const symbol = Symbol('baz')
4
5@Component
6export class MyComponent extends Vue {
7  @Inject() foo!: string
8  @Inject('bar') bar!: string
9  @Inject({ from: 'optional', default: 'default' }) optional!: string
10  @Inject(symbol) baz!: string
11
12
13  @Provide() foo = 'foo'
14  @Provide('bar') baz = 'bar'
15}

is equivalent to

1const symbol = Symbol('baz')
2
3export const MyComponent = Vue.extend({
4
5  inject: {
6    foo: 'foo',
7    bar: 'bar',
8    'optional': { from: 'optional', default: 'default' },
9    [symbol]: symbol
10  },
11  data () {
12    return {
13      foo: 'foo',
14      baz: 'bar'
15    }
16  },
17  provide () {
18    return {
19      foo: this.foo,
20      bar: this.baz
21    }
22  }
23})

See also

vuex-class