Vue-helper-decorator NPM

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.