npmpackage.info

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

@bartvanvliet/vuex-module-decorators - 0.9.11 | npmpackage.info

@bartvanvliet/vuex-module-decorators

TypeScript/ES7 Decorators to create Vuex modules declaratively

0.9.11

MIT

TypeScript

680.25 kB

2.5

Installations

npm install @bartvanvliet/vuex-module-decorators

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Min. Node Version

>= 8

Node Version

8.15.0

NPM Version

6.4.1 Score

60.8

Supply Chain

97.9

Quality

74.9

Maintenance

Vulnerability

99.6

License

Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

TypeScript

Shell

JavaScript

TypeScript (98.13%)

Shell (1.13%)

JavaScript (0.74%)

Developer

Kapulara

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

1 Stars

271 Commits

2 Forks

1 Watchers

3 Branches

1 Contributors

Updated on Feb 02, 2020

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

0.9.11

Package Id

@bartvanvliet/vuex-module-decorators@0.9.11

Unpacked Size

680.25 kB

Size

131.15 kB

File Count

NPM Version

6.4.1

Node Version

8.15.0

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

🚧 IMPORTANT 🚧

I forked this library from championswimmer/vuex-module-decorators since I required having support for championswimmer/vuex-persist in one of my packages.

Once the pull request I created get's merged I will deprecate this package.

Latest info in: Pull Request

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}

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...

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:

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

~/utils/store-accessor.ts:

import { Store } from 'vuex'
import { getModule } from 'vuex-module-decorators'
import example from '~/store/example'

let exampleStore: example

function initialiseStores(store: Store<any>): void {
  exampleStore = getModule(example, store)
}

export {
  initialiseStores,
  exampleStore,
}

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

import { exampleStore } from '~/store'
...
someMethod() {
  return exampleStore.exampleGetter
}

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.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

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

0

SAST

Determines if the project uses static code analysis.

0

Token-Permissions

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

0

Pinned-Dependencies

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

0

CII-Best-Practices

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

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

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

128 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-q42p-pg8m-cqh6
Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
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-jf85-cpcp-j695
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-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-g6ww-v8xp-vmwg
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-wvhm-4hhf-97x9
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-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.5

/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

@bartvanvliet/vuex-module-decorators

Installations

Developer Guide

Yes

CommonJS

>= 8

8.15.0

6.4.1

Score

Pull Requests

0

0

0

Issues

0

0

0

Releases

Unable to fetch releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

🚧 IMPORTANT 🚧

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

10

10

10

0

0

0

0

0

0

0

0

0

0

2.5

/10

Using with `target: es5`