-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
67 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
# 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 | ||
|
||
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. |