Vuex module generator
I’ve been using this helper for one year. It helps me to do amazing things in addition it is pretty small and extendible.
Before start, I want to share my motivation, I hope it helps you to understand why we are using this module pattern .
Motivation
Most of web applications contains CRUD actions. Vuex or other state management libraries like redux implement stores which handle CRUD actions.
According to some store patterns each module must contain isLoading, isLoaded, data and errors properties in own state therefore a module’s state can be implemented like this;
Sure, there must be other module members type,actions and mutations.
Check completed vuex module according to this module pattern before keeping read.
The module contains list state with isLoading, isLoaded, data and errors properties. When fetchCustomer action is called, these state will be changed according to three action type.
If you have checked completed vuex module you have seen three mutation;
INDEX.REQUEST, it setsisLoadingtrue, this means list has been being fetchedINDEX.SUCCESS, it setsisLoadingfalse,isLoadedtrue and data withpayload.data, this means list has been fetched and there is no problem when it was happeningINDEX.FAILURE, it setsisLoadingfalse,isLoadedfalse,data: empty array (b/c it is a list), this means there is an error and it was failed
Finally, developer can use these different states of module in different cases. For instance isLoading state can be used by a list to show an indicator or error can be used to show an error component.
Purpose of VMG is reducing code lines and making development easy.
Use cases
- If you want to control async states.
- If you have a large application which contains CRUD actions in each page/module/component.
- If you want to set a rule which limits to do CRUD actions.
