Vue Helper Decorator

This library fully depends on vue-class-component, inspired by vue-propery-decorator.

It library is for gabia Inc.

Install

npm i vue-helper-decorator

Decorator List

• @SetInitFields()
  • This saves the fields(Initial Values) to the this.
• @InjectInitFields()
  • Initialize fields to initial values.
• @ApplyLogAtMethods()
  • Add log function to methods in component.

Usage

SetInitFields and InjectInitFields are decorators that help inialize field them with intial field values.

@SetInitFields

import Vue from 'vue';
import { SetInitFields } from 'vue-helper-decorator';

export default class SampleComponent extends Vue {
    @SetInitFields()
    
    name: string = 'himan'
    //... hooks
    //... fields
    //... methods
    //... etc
}

• If you use the @SetInitFields(), the initial fields are stored in this.initFields.

• All fields are saved by default.

import Vue from 'vue';
import { SetInitFields } from 'vue-helper-decorator';

export default class SampleComponent extends Vue {
    @SetInitFields({ seeFieldsOnConsoleLog: true })
    
    name: string = 'himan'
    //... hooks
    //... fields
    //... methods
    //.. etc
}

You will see initial fields in this. (Use console.log in mounted())

Or,

Make seeFieldsOnConsoleLog parameter is true

You will see inistal fields on browser console.

@InjectInitFields

import Vue from 'vue';
import { SetInitFields, InjectInitFields } from 'vue-helper-decorator';

export default class SampleComponent extends Vue {
    @SetInitFields({ seeFieldsOnConsoleLog: true })
    
    //... hooks
    //... fields

    @InjectInitFields()
    initFields() {
        // ... someting
    }
    //... etc
}

• @InjectInitFields() should always be used with @SetInitFields().

• Use @InjectInitFields() in method.

• When the method is called, fields are initialized.

import Vue from 'vue';
import { SetInitFields, InjectInitFields } from 'vue-helper-decorator';

export default class SampleComponent extends Vue {
    @SetInitFields({ seeFieldsOnConsoleLog: true })
    
    //... hooks
    data: string = 'hi';
    num: number = 10;

    @InjectInitFields({ exceptFields: ['num']})
    initFields() {
        // ... someting
    }
    //... etc
}

• Also, Field targets can be exclueded.

• In the following example, Only the rest of the num field is initialized.

@ApplyLogAtMethods

This is adds a log function to the methods.

import Vue from 'vue';
import { ApplyLogAtMethods } from 'vue-helper-decorator';


export default class SampleComponent extends Vue {
    @ApplyLogAtMethods()
    
    //... hooks
    data: string = 'hi';
    num: number = 10;

    initFields() {
        // ... someting
    }
    //... etc
}

• For all methods in the component, you can see the log when called. (console tap in developer tools)

you can see next:

• Invoked method name
• Invoked component name
• Invoked method's parameters
• Invoked method's return values
• Invoked method's runtime

import Vue from 'vue';
import { ApplyLogAtMethods } from 'vue-helper-decorator';

export default class SampleComponent extends Vue {
    @ApplyLogAtMethods({ exceptMethods: ['initFields'] })
    
    //... hooks
    data: string = 'hi';
    num: number = 10;

    initFields() {
        // ... someting
    }

    test() {

    }
    //... etc
}

Also, Method targets can be exclueded.

In the following example, Only the rest of the initFields method is initialized.

License

MIT