Learn Vuex

Tram Ho

Hello everyone, today let’s learn about knowledge about vuex in vue.js. The content of the article will include the following

  • What is Vuex?
  • The basic concepts of vuex
  • Note when using Vuex

What is Vuex?

  • VueX is a library that helps manage the status of components in VueJS, this is a centralized storage for all components in an application, with the state principle can only be changed in a predictable manner. .
  • Vuex is also considered as a library to manage state for Vue applications by using global store.
  • Vue operates under the “One-way data flow” model with the following components:
    State: The state, where the application originated.
    View: The view, which is the mapping mappings with status.
    Actions: Actions, which are ways that a state of change responds to a user’s input from a View

However, this model breaks down when we have a lot of components sharing the same state: Many views depend on a certain state. Actions from different views need to change with the same state data. Vuex sees why not taking the shared statuses of components and managing them in a global machine, and that’s the reason for the birth of Vuex.

The basic concepts of vuex

State (state)
Can Vuex make it easier for you to define states and create status snapshots? This is because it uses only a single state tree to contain all the state of the application. Using a single state like this will help us synchronize data between componets quickly and accurately.

Retrieving the value of a state variable is the same as getting the value of an attribute in an object.

Getters (status filtering)
What makes the difference between Vuex and Redux is that we can adjust the data before returning the state. Sometimes we need to get states based on calculations, filter out states provided by the repository, for example:

If you want to use the component, you can call this.$store.getters.getEvenNumbers directly this.$store.getters.getEvenNumbers or use mapGetter
According to Docs, mutations are the only way we can really change the state in the store. And the way to trigger a mutations is to commit a String that is the name of the function we want to call in the mutations, which will take the store state as the first parameter:

Action is similar to mutation, however there are some differences. Instead of state changes, the commit actions change, it may contain asynchronous operations. This is where the logical bussiness is displayed, called the API, saved to the database, made commits (called mutations) to change the state …
Example: Add a number, if that number already exists in the state then delete and then add again.

Vuex uses a single state tree, all the state of the application is put into an object, so as the application grows, the store can grow a lot. Vuex allows to break down the store into smaller modules, each module also has state, mutation, action, getter and even allows nested modules.

Note when using Vuex

The most important thing when you use Vuex is to determine which state will store in the store, which is only the local state within the component. You can put it all in the store, but until the scale of the application gets bigger, the store will also grow, which makes it difficult to manage the state.


The above are the basics of Vuex. You can find out more on the Vuex homepage here
Some photos and references: https://vuex.vuejs.org/

Share the news now

Source : Viblo