Fortunately, having been exposed to Flux before is helpful in understanding Vuex. React learned half of it, then I gave it up because I was too busy, and now I have almost forgotten it. But it feels like Vuex is a little different from Flux.

 

For many novices, just reading the documentation is too much to digest. My advice is to look at examples of Vuex and learn by studying them. This will make a lot more sense. If you still can’t understand, the best way is to write down the four attributes of store: state, getters, mutations and actions, and then analyze the characteristics of the four attributes. Where will they be used and how are they connected together? Learn by asking yourself questions like this.

 

In simple terms, VUex uses a store object to hold all of the application-level state, which is where the data comes from. Of course, if the application is large, we can modularize the store, meaning that each module has its own store. The segmentation method is shown in the following code:

We can also see from the above code that a store has four properties: State, getters, Mutations, and Actions. I’m going to start with these four properties.

 

1, the State

Let’s start with state. It’s stored on state, or simply variable, or state. When state is not used, we initialize data directly, but with state, we transfer data from data to state. When a component needs to fetch multiple states, it can be repetitive and redundant to declare all those states as computed properties. To solve this problem, we can use the mapState helper function to help us generate calculated properties that will save you from pressing the key:

In effect, the variable stored on state is transferred to the computed property. We can also pass mapState an array of strings when the name of the computed property of the map is the same as the name of the child node of State.

Computed: mapState([// map this.count to store.state.count 'count'])Copy the code

To better understand what this function does, take a look at its source code.

As you can see, mapstate accepts both objects and arrays. The result is an object. And the res[key] values come from the store, the code in red. This concatenates two unrelated properties, which is also a mapping. Several other helper functions are similar.

 

2, Getters

Getters simply holds public functions for the component to call.Getters will be exposed asstore.gettersObject, that is, can be called with store.getters[property]. The mapGetters helper function simply maps the store getters to local computed properties, essentially getting the corresponding properties from getters, similar to deconstruction. The details are shown below. 

This allows us to pass the evenOrOdd property value from getters to the evenOrOdd property value from the corresponding component. Getters accepts state as its first argument, and Getters can also accept other Getters as its second argument.

\

3, Mutations

Mutations is similar to events, the only way to change the state in the Store of Vuex is to submit mutation. So mutations are generally stored on some methods that we need to change state.

Const store = new Vuex. Store ({state: {count: 1}, mutations: {increment (state) {/ / the status state. Count++}}})Copy the code

 

We cannot call a mutation handler directly. This option is more like event registration: “This function is called when a mutation of type INCREMENT is triggered.” To wake up a mutation handler, you need to call the store.mit method with the corresponding type:

store.commit('increment')
Copy the code

 

We can use constants instead of mutation event types when there are many mutation event types. Keeping these constants in a separate file at the same time allows our code collaborators to see the mutations in the entire app at a glance:

An important rule to remember is that mutation must be a synchronization function. \

4, the Actions

Mutation is like event registration, which requires corresponding triggering conditions. And Action is the one that manages trigger conditions.

Actions are similar to mutation, except that they commit mutation rather than directly changing the state. Actions can contain any asynchronous operation.

actions: {
    increment (context) {
      context.commit('increment')
    }
  }
Copy the code

 

The Action function accepts a context object with the same methods and properties as the store instance, so you can submit a mutation by calling context.mit. Or get state and getters via context.state and context.getters. In practice, we’ll often use ES2015 parameter deconstruction to simplify code (especially if we need to call commit many times) :

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}
Copy the code

 

Remember what we said earlier about mutation like event types? So we need to give some action to trigger. And that’s distributing the action. The Action is triggered by the store.dispatch method, which contains the name of the actions function:

store.dispatch('increment')
Copy the code

 

In addition, we can perform asynchronous operations within actions:

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}
Copy the code

 

You use this.$store.dispatch(‘ XXX ‘) to distribute actions in the component, or use the mapActions helper function to map the component’s methods to a store.dispatch call (which requires injecting store at the root node first) :

import { mapActions } from 'vuex' export default { // ... methods: { ... MapActions (['increment' // maps this.increment() to this.$store.dispatch('increment')]),... MapActions ({add: 'increment' // map this.add() to this.$store.dispatch('increment')})}}Copy the code

 

If you use mapActions, you don’t need to use this.$store.dispatch(‘ XXX ‘) again. If you don’t use mapActions, you can manually divide them. For example:

 

When to use this.$store.dispatch(‘ XXX ‘) and when to use mapActions depends on the situation.

 

 

Finally, let me ask you a question. Do you know when an extension is available? ? I don’t know if you noticed, some of them have extenders, some of them don’t.

 

Tip: any extension is contained in an object.

In addition, when there are multiple stores, note that even in different stores, the name of the function in the actions cannot be the same, otherwise the same function will be called twice.