Creating CRUD with Vue/x+Laravel Component Responsible Model

Aditya Purwa
Jul 23, 2017 · 2 min read

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.

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.

Myriatek

Web and Android Development Services — https://myriatek.com — This publication shares writings related to software development and things happening inside Myriatek.

Aditya Purwa

Written by

Software Engineer at Clearview Studios (https://kata.ai) - Software engineer, writer, designer, and artist.

Myriatek

Myriatek

Web and Android Development Services — https://myriatek.com — This publication shares writings related to software development and things happening inside Myriatek.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade