Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
vuex-orm-decorators
Advanced tools
Simple Typescript decorators to improve the vuex-orm experience in Typescript by introducing typed property access.
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 anotate 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 documation throughout this documentation.
If you have improvements or contributions to make, I will happily check and merge in pull requests.
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.
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.
ExperimentalDecorators
to true.importHelpers: true
in tsconfig.json
.emitHelpers: true
in tsconfig.json
(only required in typescript 2)
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, StringField } from 'vuex-orm-decorators'
@OrmModel('users')
class User extends Model{
@AttrField(undefined)
public id!: number;
@StringField()
public name!: string;
}
To create a fully reactive getter, simply add your getters to the model class:
import { Model } from '@vuex-orm/core';
import { AttrField, StringField } from 'vuex-orm-decorators';
@OrmModel('users')
class User extends Model{
@AttrField(undefined)
public id!: number;
@StringField()
public name!: string;
public get lowerName(){
return this.name.toLowerCase();
}
}
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, StringField } from 'vuex-orm-decorators';
@OrmModel('users')
class User extends Model{
@PrimaryKey()
@AttrField(undefined)
public uuid!: number;
@StringField()
public name!: string;
}
In this example the property uuid
replaces the default id
property as the primary key.
You can create the generic attr field type using the @AttrField
decorator.
To create auto increment fields which use the @Increment
decorator.
Like the vuex-orm library, you can create primative fields using the following decorators:
@StringField
creates a string field@NumberField
creates a number field@BooleanField
creates a boolean fieldYou 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.
@HasManyField
creates a HasMany relationship field@HasOneField
creates a HasOne relationship field@BelongsToField
creates an inverse HasOne relationship field@HasManyByField
creates a HasManyBy relationship field@HasManyThroughField
creates a HasManyThrough relationship field@BelongsToManyField
creates a BelongsToMany relationship field@MorphToField
creates a MorphTo relationship field@MorphOneField
creates a MorphOne relationship field@MorphManyField
creates a MorphMany relationship field@MorphToManyField
creates a MorphToMany relationship field@MorphedByManyField
creates a MorphedByMany relationship fieldFAQs
Simple Typescript decorators to improve the vuex-orm experience in Typescript by introducing typed property access.
The npm package vuex-orm-decorators receives a total of 218 weekly downloads. As such, vuex-orm-decorators popularity was classified as not popular.
We found that vuex-orm-decorators demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.