npmpackage.info

Gathering detailed insights and metrics for @chimerast/vuex-module-decorators

@chimerast/vuex-module-decorators - 0.10.0 | npmpackage.info

@chimerast/vuex-module-decorators

TypeScript/ES7 Decorators to create Vuex modules declaratively

0.10.0

1,787

MIT

TypeScript

639.96 kB

2.7

Installations

npm install @chimerast/vuex-module-decorators

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Min. Node Version

>= 8

Node Version

10.15.3

NPM Version

6.10.2 Score

60.6

Supply Chain

97.9

Quality

Maintenance

Vulnerability

99.6

License

Pull Requests

Open

34

Total

118

Closed

36

Merged

48

Issues

Open

108

Total

301

Closed

193

Releases

v2.0.0

Updated on Nov 23, 2021

v1.2.0

Updated on Nov 23, 2021

v1.0.1

Updated on Sep 19, 2020

v0.10.1-beta1

Updated on Oct 10, 2019

v0.10.0

Updated on Aug 13, 2019

v0.9.10-RC1

Updated on Aug 10, 2019

View All 7 releases

Languages

TypeScript

JavaScript

Shell

TypeScript (96.81%)

JavaScript (2.19%)

Shell (1%)

Developer

championswimmer

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

1,787 Stars

334 Commits

169 Forks

21 Watchers

29 Branches

31 Contributors

Updated on Jun 26, 2025

Maintainers

View All 31 Contributors

Package Meta Information

Latest Version

0.10.0

Package Id

@chimerast/vuex-module-decorators@0.10.0

Unpacked Size

639.96 kB

Size

139.02 kB

File Count

NPM Version

6.10.2

Node Version

10.15.3

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

vue vuex

Dev Dependencies

vuex-module-decorators

Detailed Guide: https://championswimmer.in/vuex-module-decorators/

Typescript/ES7 Decorators to make Vuex modules a breeze

npm type definitions

CHANGELOG

There are major type-checking changes (could be breaking) in v0.9.7
There are major usage improvements (non backwards compatible) in 0.8.0

Please check CHANGELOG

Examples

Read the rest of the README to figure out how to use, or if you readily want to jump into a production codebase and see how this is used, you can check out -

Installation

1npm install -D vuex-module-decorators

Babel 6/7

NOTE This is not necessary for vue-cli@3 projects, since @vue/babel-preset-app already includes this plugin

You need to install babel-plugin-transform-decorators

TypeScript

set experimentalDecorators to true
For reduced code with decorators, set importHelpers: true in tsconfig.json
(only for TypeScript 2) set emitHelpers: true in tsconfig.json

Configuration

Using with `target: es5`

NOTE Since version 0.9.3 we distribute as ES5, so this section is applicable only to v0.9.2 and below

This package generates code in es2015 format. If your Vue project targets ES6 or ES2015 then you need not do anything. But in case your project uses es5 target (to support old browsers), then you need to tell Vue CLI / Babel to transpile this package.

1// in your vue.config.js
2module.exports = {
3  /* ... other settings */
4  transpileDependencies: ['vuex-module-decorators']
5}

Usage

The conventional old & boring way

Remember how vuex modules used to be made ?

1const moduleA = {
2  state: { ... },
3  mutations: { ... },
4  actions: { ... },
5  getters: { ... }
6}
7
8const moduleB = {
9  state: { ... },
10  mutations: { ... },
11  actions: { ... }
12}
13
14const store = new Vuex.Store({
15  modules: {
16    a: moduleA,
17    b: moduleB
18  }
19})

Hello Decorators !

Well not anymore. Now you get better syntax. Inspired by vue-class-component

1import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators'
2
3@Module
4export default class Counter2 extends VuexModule {
5  count = 0
6
7  @Mutation
8  increment(delta: number) {
9    this.count += delta
10  }
11  @Mutation
12  decrement(delta: number) {
13    this.count -= delta
14  }
15
16  // action 'incr' commits mutation 'increment' when done with return value as payload
17  @Action({ commit: 'increment' })
18  incr() {
19    return 5
20  }
21  // action 'decr' commits mutation 'decrement' when done with return value as payload
22  @Action({ commit: 'decrement' })
23  decr() {
24    return 5
25  }
26}

async MutationAction === magic

Want to see something even better ?

1import { Module, VuexModule, MutationAction } from 'vuex-module-decorators'
2import { ConferencesEntity, EventsEntity } from '@/models/definitions'
3
4@Module
5export default class HGAPIModule extends VuexModule {
6  conferences: Array<ConferencesEntity> = []
7  events: Array<EventsEntity> = []
8
9  // 'events' and 'conferences' are replaced by returned object
10  // whose shape must be `{events: [...], conferences: [...] }`
11  @MutationAction({ mutate: ['events', 'conferences'] })
12  async fetchAll() {
13    const response: Response = await getJSON('https://hasgeek.github.io/events/api/events.json')
14    return response
15  }
16}

Automatic getter detection

1@Module
2class MyModule extends VuexModule {
3  wheels = 2
4
5  @Mutation
6  incrWheels(extra) {
7    this.wheels += extra
8  }
9
10  get axles() {
11    return this.wheels / 2
12  }
13}

this is turned into the equivalent

1const module = {
2  state: { wheels: 2 },
3  mutations: {
4    incrWheels(state, extra) {
5      state.wheels += extra
6    }
7  },
8  getters: {
9    axles: (state) => state.wheels / 2
10  }
11}

Putting into the store

Use the modules just like you would earlier

1import Vue from 'nativescript-vue'
2import Vuex, { Module } from 'vuex'
3
4import counter from './modules/Counter2'
5import hgapi from './modules/HGAPIModule'
6
7Vue.use(Vuex)
8
9const store = new Vuex.Store({
10  state: {},
11  modules: {
12    counter,
13    hgapi
14  }
15})

Module re-use, use with NuxtJS

If you need to support module reuse or to use modules with NuxtJS, you can have a state factory function generated instead of a staic state object instance by using stateFactory option to @Module, like so:

1@Module({ stateFactory: true })
2class MyModule extends VuexModule {
3  wheels = 2
4
5  @Mutation
6  incrWheels(extra) {
7    this.wheels += extra
8  }
9
10  get axles() {
11    return this.wheels / 2
12  }
13}

this is turned into the equivalent

1const module = {
2  state() {
3    return { wheels: 2 }
4  },
5
6  mutations: {
7    incrWheels(state, extra) {
8      state.wheels += extra
9    }
10  },
11  getters: {
12    axles: (state) => state.wheels / 2
13  }
14}

Dynamic Modules

Vuex allows us to register modules into store at runtime after store is constructed. We can do the following to create dynamic modules

1interface StoreType {
2  mm: MyModule
3}
4// Declare empty store first
5const store = new Vuex.Store<StoreType>({})
6
7// Create module later in your code (it will register itself automatically)
8// In the decorator we pass the store object into which module is injected
9// NOTE: When you set dynamic true, make sure you give module a name
10@Module({ dynamic: true, store: store, name: 'mm' })
11class MyModule extends VuexModule {
12  count = 0
13
14  @Mutation
15  incrCount(delta) {
16    this.count += delta
17  }
18}

Accessing modules with NuxtJS

There are many possible ways to construct your modules. Here is one way for drop-in use with NuxtJS (you simply need to add your modules to ~/utils/store-accessor.ts and then just import the modules from ~/store):

~/store/index.ts:

1import { Store } from 'vuex'
2import { initialiseStores } from '~/utils/store-accessor'
3const initializer = (store: Store<any>) => initialiseStores(store)
4export const plugins = [initializer]
5export * from '~/utils/store-accessor'

~/utils/store-accessor.ts:

1import { Store } from 'vuex'
2import { getModule } from 'vuex-module-decorators'
3import example from '~/store/example'
4
5let exampleStore: example
6
7function initialiseStores(store: Store<any>): void {
8  exampleStore = getModule(example, store)
9}
10
11export {
12  initialiseStores,
13  exampleStore,
14}

Now you can access stores in a type-safe way by doing the following from a component or page - no extra initialization required.

1import { exampleStore } from '~/store'
2...
3someMethod() {
4  return exampleStore.exampleGetter
5}

Using vuex-persist

If you would like to preserve the state e.g when loading in the state from vuex-persist

1...
2
3-- @Module({ dynamic: true, store: store, name: 'mm' })
4++ @Module({ dynamic: true, store: store, name: 'mm', preserveState: true })
5class MyModule extends VuexModule {
6
7...

Or when it doesn't have a initial state and you load the state from the localStorage

1...
2
3-- @Module({ dynamic: true, store: store, name: 'mm' })
4++ @Module({ dynamic: true, store: store, name: 'mm', preserveState: localStorage.getItem('vuex') !== null })
5class MyModule extends VuexModule {
6
7...

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

117 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-4q6p-r6v2-jvc5
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-6vfc-qv3f-vr6c
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-px4h-xg32-q955
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w
Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg
Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
Warn: Project is vulnerable to: GHSA-3949-f494-cm99
Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

2.7

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

@chimerast/vuex-module-decorators

Installations

Developer Guide

Yes

CommonJS

>= 8

10.15.3

6.10.2

Score

Pull Requests

34

118

36

48

Issues

108

301

193

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

vuex-module-decorators

CHANGELOG

Examples

Installation

Babel 6/7

TypeScript

Configuration

Using with target: es5

Usage

The conventional old & boring way

Hello Decorators !

async MutationAction === magic

Automatic getter detection

Putting into the store

Module re-use, use with NuxtJS

Dynamic Modules

Accessing modules with NuxtJS

Using vuex-persist

10

10

10

2

0

0

0

0

0

0

0

0

0

2.7

/10

Using with `target: es5`