Detailed explanation of the use of Mutation in Vuex state management-Vue.js-php.cn

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

Copy after login

index.js file in store file

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

Copy after login

App.vue file

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

Copy after login

mutations submission style

Normal submission style

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

Copy after login

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

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

Copy after login

Detailed explanation of the use of Mutation in Vuex state management ##Special submission style

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

Copy after login

If Print count and get an object

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

Copy after login

So it is more appropriate to do this in mutations

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

Copy after login

Detailed explanation of the use of Mutation in Vuex state management

Submit in App.vue

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

Copy after login

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 } },

Copy after login

In App.vue

{{$store.state.info}}

Copy after login

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

Copy after login

Detailed explanation of the use of Mutation in Vuex state management
Add value to the original object

Cannot do responsive method

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

Copy after login

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 Detailed explanation of the use of Mutation in Vuex state management

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

Copy after login

## Delete the value in the original object Detailed explanation of the use of Mutation in Vuex state management
Can't do the responsive method

delete state.info.age;

Copy after login

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 Detailed explanation of the use of Mutation in Vuex state management

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

Copy after login

mutations constant type Detailed explanation of the use of Mutation in Vuex state management

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"

Copy after login

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

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

Copy after login

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

Copy after login

Import and use it in the App.vue file

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

Copy after login

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

Copy after login

[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!

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Detailed explanation of the use of Mutation in Vuex state management

mutations status update

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