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.
npm install vuex-module-builder
-- 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
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.