Vuex For Beginners

Tram Ho

What is Vuex?

According to the homepage's definition, the text is exactly like this:

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 exported that the state can only be mutated in a predictable fashion. It also integrates with Vue's official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export / import

The definition may seem confusing, but we can roughly understand that Vuex is a pattern + library of Vuejs , it functions as a central repository of states of components in the application. When we need to change something, we only need to interact directly with the state on the Vuex store , without having to go through the relationship between components.

To better understand why it is necessary to Vuex we will go through an example:

We have 2 components, Counter contains 2 functions: incrementdecrement and Result component which has function to print the result

  • In case of not using Vuex, we will need to pass the increment or decrement event from Counter to the App and then the App will update and pass the result to the Result

This is a new case with only one level. So if the application's hierarchy of components is a lot, what happens. It should look like this:

It will be very confusing and difficult to manage, the idea of ​​this guy is similar to Redux if any brother has ever studied through Redux. Then Vuex too, it will create a common strore for the state to easily manage and manipulate when there is a change:

Setting

CDN

If you are using Vuejs in CDN format like Jquery :

https://unpkg.com/vuex

Remember to download Vuejs too, Vuejs

NPM

Yarn

After checking that package.json has successfully installed Vuex, we create a folder store and create a store.js file

So there is a centralized store of Vuex already.

Components and their uses

1. State

  • Just like in each component we usually have a data object containing componet variables, the state here can also be understood as the data of the whole 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.

    If there are many variables in our state and we only want to retrieve a number of variables but do not want to call each one like that, then don't worry there is a way to use a helper named mapState . It will use Spread Test ( ...Array ). This syntax is only applicable in ES6 javascript versions and above.

    state

    So now we have the result and value values ​​can be retrieved using without having to take each value again. Don't forget to import mapState, why not run?

    Using mapState , it is possible to retrieve the value but cannot update, Docs does not see the update by this way, but I see from the map I thought it was two-way binding, so I tried updating the state in this way and Can't see it so maybe it's just for getting state.

2. Getters

  • Sometimes we have a function that needs to be calculated based on a state variable that is present in many components. Now, for each component, we take that variable out and create a recalculation function, for example, that filters the work to be done and counts them:

    Then Vuex allows us to define functions like this in getters

    And taking it is simple:

    We can use functions in the same getters :

    And in other components, it is equally simple

    If mapSate is available, then there are mapGetters and the usage is similar:

    Or when thinking about a name, but when using it, we want to use another name.

3. Mutations

  • 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:

    Seeing the developer say that is the only way to really change but I tried one way and still see it changed:

    I still see it working, but I don't see Docs talking about this or that it is not standard and can cause errors or how. But Docs has written this method to change, so I will use this method to make sure it is not until the error is broken.

  • In addition to committing each name of the function, you can also pass an additional parameter, if your function defines more than one input parameter as state.

    Usually people will combine the arguments into an Object so that it can hold more variables to be passed

    Another way is to include both the function name and the variable to be passed to an Object with the function name to be type so that the mutations will understand and execute without changing the parameter number of the function.

    Muntations also follow Vue 's Reactivity Rules . So if after the state has been initialized we want to add a new variable to the state, then we need to notify Vue that we have a new one that we want to add or replace all.

  • We can use mutations as constants. This will be very helpful for syncing function names as well as suitable for large projects with many participants

    But it's just an option, you don't have to use it

    => One thing to remember is that this mutations will run synchronously so you need to be careful when using it, do not lie when combining it with asynchronous functions and do not understand why it does not run.

  • Like the two guys above, mutations also have a helper called mapMutations

4. Actions

  • Actions are like mutations but they differ in two ways:
    • Actions do not directly change the state in the store, but rather through mutations to change them
    • It may contain asynchronous functions

    Simple example

    The argument destructuring function can be used to create

  • How to activate an action when in another component

    We can also pass an additional parameter

    And yet another helper is mapActions

5. Modules

  • Now just a few functions are inserted into the file store.js but after each variable in the state has dozens of functions, it is very confusing. Then Vuex has supported a custom that is modules , we can separate the same purpose functions into a file as follows:

  • If you want to group mutation / action types with the same purpose you can use the Namespacing definition with the namespaced: true attribute

    And when binding to helpers that use namespaces it looks like this:

    Or put the string namespace part as the first argument

    If you don't want to use those string namespace again and again, you can use createNamespacedHelpers . It will return an object associated with the helper you want.

    Alternatively you can register the module after the store has been created with the store.registerModule method

Application structure

According to the instructions, the structure of the Vuex application should be like this

For more strict management, we should combine both the modules for objects containing many functions in mutations, actions, getters, and separate files for actions and mutations for less function objects.

Share the news now

Source : TechTalk