mutation and action

mutation

Role: Change the state of the state

Description: Each mutation object has a string type (type) and a callback function. The state is modified in the callback function. The first parameter of the callback function is state.

eg：

mutations: {
    changeMainOption (state, index) {
          state.preMainOption= index;
    },
    changeShade(state, type){
        state.mainShade= type;
    },
    changeprePerser(state, _index){
        state.prePerser= _index;
    }
}

Call method:

1. Load style

this.$store.commit('changeMainOption', 1)

//index is 1

2. Object style

this.$store.commit({type: 'changeMainOption', anyName: 1})

//index为{type: 'changeMainOption', anyName: 1}

Notice:

mutation must be a synchronous function,

The second parameter of mutation is the second parameter of commit in payload style, and the object parameter of commit in object style.

 

action

Function: Submit mutation, which can contain asynchronous operations

Description: The action function receives an instance context with the same properties and methods as the store to submit the mutation

eg: this

actions: {
    toChangeMainOption (context){
　　　　　　setTimeout(()=> {context.commit('changeMainOption', 1)}, 1000)
    },
    toChangeMainOption2 ({commit}){ // es6 parameter deconstruction writing 
        commit('changeMainOption', 2 )
    }
}

Call method:

1. Load style

this.$store.dispatch(''toChangeMainOption", {val: 1})

2. Object style

this.$store.dispatch({type: ''toChangeMainOption", val: 1})