Vuex module builder

Vuex module builder is a wrapper for building vuex stores efficiently with DRY approach.

You can just supply your state and it will auto-generate getters for your state, actions for setting states and mutations for those actions.

It also adds some default states like fetching, deleting, creating, updating (with respective getters,actions and mutations) for loading conditions and offers a global reset action for restoring state to initial stage as well as reset for each state properties.

You also have the ability to overwrite any default behavior with your own code.

Installation

npm install vuex-module-builder

Example

-- todo.js [vuex module file]

import module_builder from 'vuex-module-builder';
import api from 'my-api';
const moule_config = {
    state: {
        todos:[],
    },
    actions:{
        fetch(store,payload){
            store.commit('set_fetching', true); //this mutations is auto generated by vuex-module-builder
                api.todos(payload)
                .then((response) => {
                    store.commit('set_fetching', false); //this mutations is auto generated by vuex-module-builder
                    store.commit('set_todos', response); //this mutations is auto generated by vuex-module-builder
                });
        },
    },
};
const store_module =  new module_builder(moule_config);
export default store_module;

with only the above code you'll get

namespaced = true (can not be modified by you at the moment)

state:

todos:[] //your code

fetching:false,

creating:false,

updating:false,

deleting:false,

mutations:

set_fetching

set_creating

set_updating

set_deleting

set_todos

reset

reset_todos

actions:

fetch //your code

set_fetching

set_creating

set_updating

set_deleting

set_todos

reset

reset_todos 

getters:

fetching

creating

updating

deleting

todos

You can always overwrite any state,mutation,action or getters as you like.