If your app has a complex state management system, and is based on vuex, your store probably contains several Vuex modules. If not, it should.
vuex-module is a way to rewrite your store modules. You will either like it for its most simple syntax or hate it for being an additional/confusing layer to your stack… Maybe you should at least give it a try.
vuex-module syntax example
This is the sample from the Github repository :
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()
And in the component :
export default {
computed: mapGetters({ products: 'all' }, 'products'),
methods: mapActions(['fetch'], 'products')
}