Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue’s official devtools extension (opens new window)to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.
Let’s begin with how our web application “used to” work decades ago.(even several years ago before Single Page Application appeared as a trend)
This is MVC pattern and see how it works behind of the scenes. I go to espn.com to check out last week’s awesome touch down of my college football. The page I see, is the “View” from the pattern. Here, I want to login first to see all the relevant videos I watched already with my account. So, I input all my credentials and click login. Now from the “View”, the request goes to the Model to Controller(or sometimes straight to controller depending on how the application is constructed.) In this controller, the application calls backend api to hit up the databases to fetch my information. After it has been done, the controller updates “Model” and the model updates the view. Finally, I am happy with myself logged in and watching Fighting Irish crashing Michigan.
However, the problem soon arouse when the application got a little sophisticated. So I am still on the espn.com but what if I edited information about my college team, stats, and uploaded several fan videos with twenty different comments at the same time? (of course you cannot do this, but lets assume!) Here is how the MVC pattern should look like.
It is complicated. The bigger problem however is, there can be update loops where for example, uploading one fan video of my college updates information and displays the updated info on the view. However, there are 20 more videos with other information waiting? This kind of structure often causes updated loops that cannot be predicted. So we use Flux pattern
This pattern is unidirectional data flow where these four things: action, dispatcher, model, and view come in play together to solve the complex data flow problems in MVC pattern. Instead of going back to different models and updating the models, this pattern always moves from the left to the right which is easier for developers to track where the problems may have occurred or which part of the application is struggling with request traffics.
As an application manages more numbers of controllers, it becomes more challenging to come up with precise data flow. Following the FLUX pattern, Vue introduced Vuex. I am being repetitive here, but for the last time, let me state the three main problems that Vuex can solve.
- Overcome the limit of MVC pattern
- Clear data delivery between components
- Solving synchronous problem for updating same data in multiple components
Ok, now we know the background and I will discuss more details about the Vuex. Compare to the MVC pattern, here is how Vue, following the Flux pattern, should look like.
State: this is where the data that we use among components exist
View: the template that displays the data
Action: Upon user’s input from View, call appropriate methods to call the backend api or update the data in state
The structure of Vuex looks like the following:
Let me go through above image thoroughly. Vue components are the templates that users see in the application. There are actions, mutations, and state from Vuex in the Vue application. Dispatch, commit, render, and mutate are functions that enable developers to easily use Vuex. In actions, you can use mapState and mapGetters to fetch any information or data. In Mutations, you include payload to “write” the data in state. In states, there exist all the data in the templates.
In this article, I superficially touched upon Vuex and there are more detailed concepts to be explored but I want to briefly mention about Vuex because this is probably the first “complicated” concept that many developers encounter and through understanding the background of web applications, many people hopefully find this article useful!
