vuex-module

vuex-module

Module that turns vuex modules into poetry.

Key features

• Auto namespacing for mutations, actions and getters
• Mappers for namespaced components
• Localized state and commit available via this
• Nicer way of registering mutations, actions and getters
• Optional global registration for getters

Example

import { VuexModule } from 'vuex-module'
import shop from '../../api/shop'

const { state, getter, action, mutation, build } = new VuexModule('products')

state({ all: [] })

getter(function all() {
  return this.state.all
});

action(function fetch() {
  return shop.getProducts(products => {
    this.commit('fetch', products)
  })
})

mutation(function fetch(products) {
  this.state.all = products
})

export default build()

Getters, actions and mutations will be prefixed with with module name resulting with: products/all, and products/fetch methods.

You can then use VuexModule mappers to map namespaced methods to your components.

export default {
  computed: mapGetters({ products: 'all' }, 'products'),
  methods: mapActions(['fetch'], 'products')
}

Inside mutations state is available via this. This simplifies function declaration and makes code more readable. Same goes for getters and actions (context, commit, rootState, rootGetters).

MIT