Creating CRUD with Vue/x+Laravel Component Responsible Model

Recently I tried to learn more about Vuex — Most of the time I worked without Vuex, mostly because I handle legacy project, and new project usually has its front-end designed by the designer already.

So I decided to create a study case on how to use Vuex efficiently. There is a lot of way to use Vuex, because it is only a store library that recommend user to use Flux Architecture.

My first study case was Component Responsible model. It means that the component is responsible for any interaction. So, any interaction between the server and the user interface is handled by the component instead of the store. Store is just a store, no more, no less.

The most notable part of this model is that there is no Action on your store.

Above you can see, that the component is doing the ajax request to obtain data from the server, then commit the data to the store — Every asynchronous request or data manipulation is done directly on the component.This model recommends that every mutation is atomic, and does not change multiple state on single mutation — To change multiple state, you have to create two mutation and let the component call both of the mutations (remember, component is responsible for most interaction, your store is just a store).

All mutations on the storage is atomic — Again, no actions on the store.You can see that we have an event bus there, we use this to communicate with other components to update their state because we can not use action that will later mutate states for other components.

The form component used event bus to tell that there might be a new data after save event, then other component can update their states.Remember that each component is responsible for managing their states and only do what they’re supposed to do. Above, the form is responsible for saving the data only, it should never be responsible for reloading the data on the display.

The display side, listen to the event bus used for user management. When there is a save event, the display side then load the data and updates it states.

Conclusion

The result of this study case was a new model on how we can use Vuex.

Component Responsible model with Vuex ensures that component is responsible for the interaction between server and the user interface — Component should not be responsible for updating other components states, unless it is necessary — Store is just a store, and all mutation should be atomic.

The advantages of using this model are:

1. Atomic Mutation — We know what the called mutations will do.
2. Component Responsible — We know what component is responsible for each state changes.
3. Store Readability — Store code is more clean, people can scan through it fast and easy.

You can find this study case full code implementation hosted on my GitHub.

If you have any suggestions on how to improve this model, feel free to write it on the comment sections or collaborate directly on the GitHub repository above.