Detailed explanation of the difference between getter and mutation in Vuex

introduction

In modern front-end development, state management is a topic that cannot be ignored, and Vuex, as the official state management library, plays a crucial role in large-scale applications. When we use Vuex for state management, getter and mutation are two important concepts. Although they are all used to deal with state, their functions and usage scenarios are very different. In this article, we will explore the difference between getter and mutation in detail and help understand it with sample code.

1. What is Mutation?

Mutation is a method used in Vuex to change state. It cannot be asynchronous, so all state modifications need to be done synchronously in mutation. The role of Mutation is to maintain consistency of state. In Vuex, each mutation has a string type event type and a callback function that accepts the current state and payload as parameters.

1.1 Mutation sample code

Let's use a simple counter example to illustrate the use of mutation. First, let's create the Vuex store and define a mutation.

import Vue from 'vue';
import Vuex from 'vuex';

(Vuex);

const store = new ({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      ++;
    },
    decrement(state) {
      --;
    },
    setCount(state, payload) {
       = payload;
    }
  }
});

In this example, we have a count state and define three mutations: increment, decrement, and setCount. These three methods are used to modify the state. You can call these mutations through methods.

1.2 Calling Mutation

We can call mutation in the component as follows:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="reset">Set Count to 10</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$;
    }
  },
  methods: {
    increment() {
      this.$('increment');
    },
    decrement() {
      this.$('decrement');
    },
    reset() {
      this.$('setCount', 10);
    }
  }
};
</script>

In this component, wethis.$Call defined mutations to increase, decrease or reset the count.

2. What is Getter?

Getter is a computed property provided by Vuex for obtaining state. Their functions are somewhat similar to the computed properties of Vue, which can calculate some derived state based on the state in the store. Getter can not only read the state, but also use input parameters and return the processed state value.

2.1 Getter sample code

In our counter example, we can add a getter to get the squared value of the current count.

const store = new ({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      ++;
    },
    decrement(state) {
      --;
    },
    setCount(state, payload) {
       = payload;
    }
  },
  getters: {
    squareCount(state) {
      return  * ;
    }
  }
});

In this example, we define a gettersquareCount, it returnscountThe square value of the state.

2.2 Using Getter

In a component, we can use getters like we use computed properties:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Square Count: {{ squareCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="reset">Set Count to 10</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$;
    },
    squareCount() {
      return this.$;
    }
  },
  methods: {
    increment() {
      this.$('increment');
    },
    decrement() {
      this.$('decrement');
    },
    reset() {
      this.$('setCount', 10);
    }
  }
};
</script>

In this component, wethis.$Gets the square value of the current count and displays it in the view.

3. The main differences between Getter and Mutation

3.1 Different functions

Mutation:For changing the state, it must be synchronous and focus on updating the data in the store.
Getter:Used to obtain the derived value of a state, new values can be generated based on state, or parameters can be accepted, which are usually used for calculation and filtering of states.

3.2 Different usage methods

Mutation:useto call.
Getter:useCome to get it.

3.3 Synchronous and asynchronous

Mutation:It must be synchronized, all state changes must be completed in Mutation, and the state reactions of the upper component are also synchronized.
Getter:The derived state can be calculated from the state, usually derived through calculation of the state value.

3.4 Different usage scenarios

Mutation:Used to respond to user actions, such as increasing the count after clicking the button, and changing the status needs to be changed.
Getter:Used to obtain the calculation results of a state, such as displaying the square, sum or other derived data of a certain state.

in conclusion

In Vuex, effectively distinguishing getters and mutations is the basis for using state management. In complex applications, it is crucial to accurately manage state and data flows. We understand the definitions, usages of getters and mutations and the core differences between them through examples. In daily development, it is important to pay attention to the functional division of these two to keep the code neat and maintainable.

The above is a detailed explanation of the difference between getter and mutation in Vuex. For more information on the difference between Vuex getter and mutation, please pay attention to my other related articles!