Another way to declare Vuex modules


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')
}

Latest posts

Use Vue.js to create custom web components

Include Vue.js components in any HTML/JS application

Use a global event bus instead of a state manager

Emit and listen to events across every Vue components of your app

Vue.js Component Style Guide

General purpose recommandations for writing Vue.js components code

How to use Docker containers for Vue.js applications

Get started with Docker and Vue.js

Hide elements during loading using "v-cloak"

You probably need this directive and didn't know it

Using Bootstrap with Vue.js

Question is : do you really need Boostrap ?

Build, test and deploy your Vue.js app easily with Gitlab

Introduction to Continuous Integration using free Gitlab tools

Simple state management, simpler than Vuex

Vue Stash makes it easy to share reactive data between components. An alternative to Vuex.

Hybrid Vue.js app in Cordova : desktop or mobile ?

A simple hack to know if the code is executed in a website or in the Cordova version of your app

Does Vue.js require jQuery ?

No it doesn't. But you might find it useful, here's why.