vuex-orm-decorators

vuex-orm-decorators

Decorator Syntax for Vuex ORM for better type safety and a better experience.

Typescript Decorators to simplify vuex-orm integration in typescript projects. If you are using the vue-module-decorators or vue-property-decorator packages then this will allow you to use the vuex-orm plugin in the same way.

Using the decorators allows better type safety in your projects by allowing you to create conventional Typescript properties, and annotate them as fields for a better experience. Intellisense in Visual Studio Code just works with the annotations, where it doesn't in the vanilla plugin without boilerplate.

This documentation isn't supposed to be a replacement for the vuex-orm documentation, if you are unfamiliar with the concepts of vuex-orm then check out their documentation: https://vuex-orm.github.io/vuex-orm/guide/prologue/what-is-vuex-orm.html. I have linked to relevant guide pages in their documentation throughout this documentation.

Contribute

If you have improvements or contributions to make, I will happily check and merge in pull requests.

Setup

Installation

npm install -D vuex-orm-decorators

This package targets es2015, if you need to target es5 then you will need to get VUE-CLI to transpile this package.

Auto Model Registration

Models can automatically register themselves in the database. To do so, instead of installing the vuex-orm database, install the wrapper provided by this library as follows:

import Vue from 'vue';
import Vuex from 'vuex';
import { ORMDatabase } from 'vuex-orm-decorators'

Vue.use(Vuex);

export default new Vuex.Store({
    state: {},
    modules: {},
    plugins: [ORMDatabase.install()],
});

When you use a model it registers itself in the database automatically if it has not already. If you do not want auto registered models, simply install the vanilla database and register them as you would normally.

Typescript

1. Set ExperimentalDecorators to true.
2. Set importHelpers: true in tsconfig.json.
3. Set emitHelpers: true in tsconfig.json (only required in typescript 2)

Nuxt.js

As Nuxt.js uses cjs modules you need to transpile the library. Add the following to the nuxt.config.js

{
    build: {
        transpile: ['vuex-orm-decorators']
    }
}

If you want to register models automatically do not install vuex-orm database, just export plugin from store/index.js

import { ORMDatabase } from 'vuex-orm-decorators'

export const plugins = [ORMDatabase.install()]

Usage

Basic Usage

Out of the box a vuex-orm model is defined as:

import { Model } from '@vuex-orm/core';

class User extends Model {

    static entity = 'users';

    static fields() {
        return {
            id: this.attr(undefined),
            name: this.attr('')
        };
    }

}

The defined fields don't gain type checking by Typescript in this way because they are never defined as properties of the model class. With this decorator library though it allows you to write the same in the following way to achieve type checking on your queried models:

import { Model } from '@vuex-orm/core'
import { AttrField, OrmModel, StringField } from 'vuex-orm-decorators'

@OrmModel('users')
class User extends Model {

    @AttrField() id!: number;

    @StringField() name!: string;

}

Getters

To create a fully reactive getter, simply add your getters to the model class:

import { Model } from '@vuex-orm/core';
import { AttrField, OrmModel, StringField } from 'vuex-orm-decorators';

@OrmModel('users')
class User extends Model {

    @AttrField() id!: number;

    @StringField() name!: string;

    get lowerName() {
        return this.name.toLowerCase();
    }

}

Mutators

You can pass a closure to the 2nd argument of @AttrField, @StringField, @NumberField, and @BooleanField decorator. The closure takes the corresponding value as an argument, and you can modify the value however you want:

import { Model } from '@vuex-orm/core';
import { AttrField, OrmModel, StringField } from 'vuex-orm-decorators';

@OrmModel('users')
class User extends Model {

    @StringField(null, (name) => {
        return name.toLowerCase();
    }) name!: string;

}

Setting a Primary Key

Rather than setting a primary key by setting the static property primaryKey with the magic string name of the property you want to be the primary key, you can simply annotate the property with the @PrimaryKey decorator as follows:

import { Model } from '@vuex-orm/core';
import { AttrField, OrmModel, StringField } from 'vuex-orm-decorators';

@OrmModel('users')
class User extends Model {

    @PrimaryKey()
    @AttrField() uuid!: number;

    @StringField() name!: string;

}

In this example the property uuid replaces the default id property as the primary key.

Single Table Inheritance

If your model extends a base model, then STI inheritance needs to be used. The base entity name needs to be provided as the second argument to the ORMModel decorator and as third argument provide the discriminator fields:

Person : Base Entity

@OrmModel('persons')
class Person extends Model {

    @AttrField() id!: string;

    @StringField() name!: string;

}

Teenager extends Person

@OrmModel('teenagers', 'persons', {
    PERSON: Person,
    TEENAGER: Teenager
})
class Teenager extends Person {

    @StringField() school!: string;

}

Adult extends Person

@OrmModel('adults', 'persons', {
    PERSON: Person,
    ADULT: Adult
})
class Adult extends Person {

    @StringField() job!: string;

}

Now, you can create mixed types of records at once.

Person.insert({
    data: [
        { type: 'PERSON', id: 1, name: 'John Doe' },
        { type: 'TEENAGER', id: 2, name: 'Jane Doe', school: '22nd Best School' },
        { type: 'ADULT', id: 3, name: 'Jane Roe', job: 'Software Engineer' }
    ]
});

Discriminator Field Override

You may define a static typeKey on the base entity of your hierarchy if you want to change the default discriminator field name:

@OrmModel('persons')
class Person extends Model {

    /**
     * The discriminator key to be used for the model when inheritance is used.
     */
    static typeKey = 'PERSON';

    @AttrField() id!: string;

    @StringField() name!: string;

}

Generic Types

You can create the generic attr field type using the @AttrField decorator.

Uid

To create uid field which use the @UidField decorator.

Auto Increment (deprecated)

To create auto increment fields which use the @Increment decorator.

Use UidField decorator instead.

Primitive Types

Like the vuex-orm library, you can create primitive fields using the following decorators:

1. @StringField creates a string field
2. @NumberField creates a number field
3. @BooleanField creates a boolean field

Creating Relationships

You can create all relationships defined in the vuex-orm library. All the relationship decorators take the exact same arguments as the vanilla vuex-orm library static functions.

1. @HasManyField creates a HasMany relationship field
2. @HasOneField creates a HasOne relationship field
3. @BelongsToField creates an inverse HasOne relationship field
4. @HasManyByField creates a HasManyBy relationship field
5. @HasManyThroughField creates a HasManyThrough relationship field
6. @BelongsToManyField creates a BelongsToMany relationship field
7. @MorphToField creates a MorphTo relationship field
8. @MorphOneField creates a MorphOne relationship field
9. @MorphManyField creates a MorphMany relationship field
10. @MorphToManyField creates a MorphToMany relationship field
11. @MorphedByManyField creates a MorphedByMany relationship field