Turn vuex modules into poetry.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
examples
src
test
.babelrc
.eslintrc.js
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
bili.config.js
package-lock.json
package.json

README.md

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