码迷,mamicode.com
首页 > 其他好文 > 详细

mutation与action

时间:2018-05-09 19:25:42      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:bsp   state   方式   .com   isp   状态   commit   set   stat   

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

mutation与action

标签:bsp   state   方式   .com   isp   状态   commit   set   stat   

原文地址:https://www.cnblogs.com/amujoe/p/9015699.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!