Generic Vuex store module

Sebastiaan de Stoppelaar
Woost
Published in
1 min readOct 29, 2018

In many projects, when using the Vuex store, you are creating the same similar modules for multiple resources. For example, you have a Vuex module in your application to manage your users, cars, cats and drinks. And those modules have probably almost exactly the same API routes, so you are only changing the name of the route in every module.

By using a generic re-usable module, you prevent writing the same code over and over:

In this example, you initialize the module with the name of the resource and some default values for initializing a new object. For each module, you can use the default state, getters, mutation & actions from the generic module, or provide and add your own implementation.

Example of genericModule.js

This module assumes you have a root level store with a setIsLoading mutation and an action for setError.

More information about Vuex modules can be found here.

--

--