Detailed explanation of the use of Mutation in Vuex state management

mutations status update

The only way to update store status in vuex: submit Mutation

Mutation mainly consists of two parts:

• String event type (type)

• A callback function (handler), the callback function’s One parameter is state
  

##mutations passing parameters

When updating data through mutations, we may need to carry some additional parameters

Parameters are called mutations and are payloads

Example:

The first button clicks counter 5, the second button clicks counter 10

App.vue file

<button>+5</button>
<button>+10</button>

index.js file in store file

 mutations: {
    incrementCount(state, count) {
      state.counter += count
    }
  },

App.vue file

methods: {
    addCount(count) {
      this.$store.commit("incrementCount", count);
    }
  }

mutations submission style

Normal submission style

this.$store.commit("incrementCount", count);

Submit like this, if you print count, you will get count

incrementCount(state, count) {
      // state.counter += count
      console.log(count);
    }

##Special submission style

this.$store.commit({
        type: "incrementCount",
        count
      });

If Print count and get an object

    incrementCount(state, count) {
      // state.counter += count
      console.log(count);
    }

So it is more appropriate to do this in mutations

incrementCount(state, payload) {
      state.counter += payload.count
      console.log(payload.count);
    }

Submit in App.vue

this.$store.commit({
        type: "incrementCount",
        count
      });

mutations response rules

The state in vuex is responsive. When the data in the state changes, the vue component will automatically update.

When we change the value in the original object, the page will also change

state: {
    info: {
      name: 2401,
      age: 18
    }
  },
   mutations: {
    // 改变info中的值
    infoChange(state) {
      state.info.age = 10
    }
  },

In App.vue

<h2 id="store-state-info">{{$store.state.info}}</h2>
<button>infoChange</button>

 infoChange() {
      this.$store.commit("infoChange");
    }

Add value to the original object

Cannot do responsive method

state.info['address'] = '地球';

In fact, the address has been It was added to info, but this method cannot be responsive, so it is not displayed on the page

Responsive method

Vue.set(state.info, "address", '地球');

## Delete the value in the original object
Can't do the responsive method

delete state.info.age;

In fact, the age in the info has been deleted, but this method can't do it to responsive, so there are age

responsive methods

Vue.delete(state.info, "age")

mutations constant type

Official recommendation is to define the method names in mutations as constants, which is less error-prone and easier to manage and maintain.

Create mutations-type.js file under the store file to store constants

export const INCREMENT = "increment"
export const DECREMENT = "decrement"

Import and use it in the index.js file under the store file

import {
  INCREMENT,
  DECREMENT
} from "../store/mutations-type"

 mutations: {
    [INCREMENT](state) {
      state.counter++;
    },
    [DECREMENT](state) {
      state.counter--;
    },
  }

Import and use it in the App.vue file

import { INCREMENT, DECREMENT } from "../src/store/mutations-type";

methods: {
    add() {
      this.$store.commit(INCREMENT);
    },
    sub() {
      this.$store.commit(DECREMENT);
    },
   }

[Related recommendations:

vue.js video tutorial

】

The above is the detailed content of Detailed explanation of the use of Mutation in Vuex state management. For more information, please follow other related articles on the PHP Chinese website!