Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to use Mutation of vuex", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use Mutation of vuex" article.

Vuex-Mutation

The only way to change the state in Vuex's store is to submit mutation. Exe. This is the original text of the official document. It is critical not to modify the state in store in any other way, which will make the state out of our control.

Define a mutation in stroe to change the count++.

Mutations: {

AddCount (state) {

State.count++

}

}

The first parameter of mutation is state, through which we can get the state defined in state.

Call the defined mutation (Route 1) within the component. Change the value of count by triggering addCount in store through this.$store.commit ("addCount"). In this way, the count referenced on other pages will change accordingly.

Methods: {

FilterAgeGt18 (arr) {

Return arr.filter ((ele, ind) = > {

Return ele.age > 18

});

}

AddCountInR1 () {

This.$store.commit ("addCount")

}

}

Pass parameters to mutation, which may need to be passed when changing the state in store. Then define a mutation:addCountWithParams to add the value of count to the passed parameters.

Mutations: {

AddCount (state) {

State.count++

}

AddCountWithParams (state, params) {

State.count + = params

}

PushDataToArrat (state) {

State.array.push ({

Name: "sunq"

Age:100

})

}

}

Pass parameter calls within the component (routing 2.1).

Methods: {

AddLocalCount () {

This.localCount++

}

AddCount () {

This.$store.commit ("addCountWithParams", Math.ceil (Math.random () * 20))

}

}

Pass in a random integer from 1 to 20 and add it to count.

It is officially recommended to pass an object parameter, which is true in practice, which avoids the control of the number of parameters, and it can be combined with the object submission of mutation, and the writing method is more concise.

Define a mutation and pass an object parameter.

Mutations: {

AddCount (state) {

State.count++

}

AddCountWithParams (state, params) {

State.count + = params

}

AddCountWithObjParams (state, params) {

State.count + = params.num

}

}

Call addCountWithObjParams (Route 3) using an object in the component.

Methods: {

AddCount () {

/ / submit by normal method

This.$store.commit ("addCountWithObjParams", {

Num: Math.ceil (Math.random () * 10)

});

/ / submit by object

This.$store.commit ({

Type: "addCountWithObjParams"

Num: Math.ceil (Math.random () * 10)

});

}

}

The above code is submitted twice, using the normal way to submit and the object style to submit addCountWithObjParams.

Mutation needs to follow the response rules of Vue, so there are two points to pay attention to.

Variables changed by mutation need to be declared in state first.

For the addition of object properties, you can not use a common way, such as o1.k1 = 12; although such additional attributes can achieve the effect, but the response of vue can not be detected, then the two-way data about the object will not be triggered.

Give me a chestnut.

Add an object aObject. State.

State: {

Count:13

AnotherCount:17

AObject: {

A:147

}

}

Get the object within the component and render all key-value pairs using v-for (Route 3).

Use mapState to obtain:

Computed:mapState (["anotherCount", "count", "aObject"])

Page rendering:

The value of {{k}} of object aObject in store: {{v}}

Add a mutation and add a property to the object.

Mutations: {

AddCount (state) {

State.count++

}

AddCountWithParams (state, params) {

State.count + = params

}

AddCountWithObjParams (state, params) {

State.count + = params.num

}

ChangeAvalue (state) {

State.aObject.b = 149,

Console.log (state.aObject)

}

}

Commit this mutation in the component (Route 3).

ChangeA () {

This.$store.commit ({

Type: "changeAvalue"

});

}

The effect is that the object printed by the console already has the attribute b, but the rendering of the page has not changed.

The correct posture should be the set method provided by Vue. Modify the mutation of changAvalue. Vue.set ()

ChangeAvalue (state) {

/ / state.aObject.b = 149

Vue.set (state.aObject, "b")

Console.log (state.aObject)

}

The list rendering of the page for submitting the mutation again will be updated.

The use of auxiliary functions. MapMutations (routing 4).

Like state and getter, mutatin has an auxiliary function. Looking back at the above logic, we submit mutation in the event handler of the click event, so why not just use mutation as the event handler of the click event, so that there is less nesting of functions. MapMutations can achieve this.

MapMutations can map mutation to methods in a component. Like mapGetters, it can pass an array, map mutation to a method with the same name in a component, or pass objects to give mutation an alias within a component.

Methods: {

... mapMutations ([

'addCount'

])

... mapMutations ({

Add: 'addCount'

})

}

In this way, addCount and add can be assigned directly to the click event of the button, and the operation of adding count to 1 can be realized.

The use of Auxiliary function of mutation

Add Count

Or add Count.

Value of count: {{count}}

All operations done by mutation are synchronous. Mutation cannot manipulate variables in state asynchronously.

The above is about the content of this article "how to use the Mutation of vuex". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.