Interpretation of four commonly used core concepts of Vuex

Four common core concepts of Vuex

In Vuex, state, getters, mutations and actions are four core concepts, and students often mess up some of the concepts and usages. Here I will explain them in a unified way.

State

First of all, we need to clarify the core concept of Vuexstate。

State is an object in Vuex that stores application state.

These states are responsive and the view will automatically update when they change.

Getters

The students here have questions. The state of vuex can be accessed directly, so why do you need to add a single Getter?

Actually: Getters is used to derive some state from state, such as filtering the data in state or calculating new values.

Compared to the value that directly returns state, the return value of getter is cached according to its dependencies.

Revaluation will only be reevaluated if the relevant dependencies change.(Speaking humans means reducing computing costs and improving performance)

usage:

Define getter in store:

const store = new  ({  
  state: {  
    todos: [  
      { id: 1, text: '...', done: true },  
      { id: 2, text: '...', done: false }  
    ]  
  },  
  getters: {  
    doneTodos: state => {  
      return  (todo => todo. done)  
    }  
  }  
})

Use getters in components:

computed: {  
  doneTodos () {  
    return this.$store. getters. doneTodos  
  }  
}

Mutations

Mutations is the only way to change state in Vuex (remember, it's unique).

Mutations in Vuex are very similar to events: each mutation has a string of event type (type) and a callback function (handler).

This callback function is where we actually make the state change, and it will accept state as the first parameter.

const store = new  ({  
  state: {  
    count: 0  
  },  
  mutations: {  
    increment (state) {  
      // Change status      ++  
    }  
  }  
})
Submit in component mutation：

javascript
methods: {  
  increment () {  
    this.$ ('increment')  
  }  
}

Actions

So what is the difference between actions and mutations?

Actions are similar to mutations, the difference is:

• Action submits mutation, not a direct change of state.
• Action can contain any asynchronous operation.
• You can use actions when you need to perform asynchronous operations on state or a batch of mutations.

usage:

Define action in the store:

const store = new  ({  
  state: {  
    count: 0  
  },  
  mutations: {  
    increment (state) {  
      state. count++  
    }  
  },  
  actions: {  
    incrementAsync ({ commit }) {  
      setTimeout (() => {  
        commit ('increment')  
      }, 1000)  
    }  
  }  
})

Distribute action in component:

methods: {  
  incrementAsync () {  
    this.$('incrementAsync')  
  }  
}

Notice:

In actions, you can access the commit method (or other Vuex properties) through the context object.

For convenience, we can directly deconstruct the commit, just like the example above.

Summarize

• State:Storing the status of the application.
• Getters: Compute attributes based on state and can cache results.
• Mutations: The only way to directly change state, and it must be a synchronous function.
• Actions: Similar to mutations, used to commit mutations, can contain any asynchronous operations.

Together, these four concepts form the core functionality of Vuex, making state management clear, predictable and maintainable in Vue applications.

The above is personal experience. I hope you can give you a reference and I hope you can support me more.