Talking about the basic use of mutation and action of vuex, vuexmutation

Talking about the basic use of mutation and action of vuex, vuexmutation

The implementation is very simple, that is, click + 1's count plus one, and click-1's count-1

1. mutation

In vue, only mutation can change the state. mutation is similar to an event. Each mutation has a type and a processing function. Because only mutation can change the state, the processing function automatically obtains a default parameter state. the so-called type is actually the name. action goes to commit for a mutation, and it needs to specify which mutation to commit. Therefore, mutation requires at least one name. After commit mutation, what should we do, you need to specify a processing function for it. The type (name) + processing function constitutes a mutation. now test. add mutation in js.

Const store = new Vuex. store ({state: {count: 0}, mutations: {// Add 1 increment (state) {state. count ++;}, // minus 1 decrement (state) {state. count --}}})

Vue we recommend that you change the mutation type to an uppercase constant.

Mutations: {// Add 1 INCREMENT (state) {state. count ++;}, // subtract 1 DECREMENT (state) {state. count --}}

Ii. action

Action to commit mutations, so we need to define action. test. js to add actions.

Const store = new Vuex. store ({state: {count: 0}, mutations: {// Add 1 INCREMENT (state) {state. count ++;}, // minus 1 DECREMENT (state) {state. count -- }}, actions: {increment (context) {context. commit ("INCREMENT") ;}, decrement (context) {context. commit ("DECREMENT ");}}})

The definition method of action and mutions is similar. We need to dispatch an action, so actions must have a name. After dispatch action, it will do something, that is, commit mutation, therefore, you must specify a function for it. Because commit mutation is required, the function will automatically obtain a default parameter context, which is a store instance and can be used to obtain the attributes and methods of the store instance, such as context. state will get the state attribute, context. the commit command is executed.

In fact, actions can also be abbreviated. Because the function parameter is an object, the function uses a method in the object. We can directly obtain this method through the deconstruct and assignment of the object. Modify actions

actions: {    increment({commit}){      commit("INCREMENT")    },    decrement({commit}){      commit("DECREMENT")    }  }

Iii. dispatch action

Now the dispatch action is left. When will dispatch action be performed? Only when we click the button will we add a click event to the button and dispatch action in the click event processing function.

At this time, we need to create an operation component. We will name it test. vue

<template> <div>  <div>    <button @click="add">+1</button>    <button @click="decrement">-1</button>  </div> </div></template>

Then, we get the two operation events in methods.

<script>  export default {    methods: {      increment(){        this.$store.dispatch("increment");      },      decrement() {        this.$store.dispatch("decrement")      }    }  }</script>

Of course, this writing method is quite troublesome. vuex also provides us with the mapActions function, which is the same as mapState and maps our actions directly to the actions in the store.

<script>　　　 import {mapActions} from 'vuex'  export default {    methods: {      ...mapActions(['increment', 'decrement'])    }  }</script>

If the name of the event processing function is different from that of the action

Provides an object. The attribute of the object is the name of the event processing function, and the attribute value is the name of the corresponding dispatch action.

<Script> import {mapActions} from 'vuex' export default {methods: {// This method is feasible but troublesome. // at this time, vue provides the mapAction function, // It is the same as mapState and maps our actions directly to the actions in the store. // Increment () {// this. $ store. dispatch ('credentials') //}, // decrement () {// this. $ store. dispatch ('crement') // below we use a simple method //... mapActions (['credentials', 'credentials'])/** if the name of the event processing function is different from that of the action, mapActions is provided with an object, the attribute of the object is the name of the event processing function, and the attribute value is the name of the corresponding dispatch action. * /// This is actually used to change the event name... mapActions (['crement']),... mapActions ({add: 'credentials'}) }}</script>

At this time, we click the button to see that the count has changed.

The last line is a simple graphic parsing, which should look more intuitive.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.