mutation与action

Posted 2020-11-03 颠覆者

mutation

作用: 更改state的状态

说明: 每个mutation对象都有字符串类型（type）与回调函数，在回调函数内进行状态修改，回调函数的第一个参数为state

eg：

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

调用方式:

1.载荷风格

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

//index为1

2.对象风格

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

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

注意:

mutation必须是同步函数，

mutation第二个参数在载荷风格时为commit的第二个参数，对象风格时为commit的对象参数。

 

action

功能: 提交mutation，可包含异步操作

说明: action函数接收一个与store有相同属性方法的实例context来提交mutation

eg:这

actions: {
    toChangeMainOption (context){
　　　　　　setTimeout(()=> {context.commit(‘changeMainOption‘, 1)}, 1000)
    },
    toChangeMainOption2 ({commit}){ //es6参数解构写法
        commit(‘changeMainOption‘, 2)
    }
}

调用方式:

1.载荷风格

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

2.对象风格

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