首页 > 其他 > 详细

vuex中的mutations、actions

时间:2018-01-24 13:09:24      阅读:215      评论:0      收藏:0      [点我收藏+]

//阅读本文需要一点vuex的基本知识

commit => mutation  //用来触发同步操作的方法

dispatch=>action  //用来触发异步操作的方法

如果想改变vuex的store 中的状态的唯一方法是提交(commit) mutation,如果想在action中改变store中的状态,先要dispatch一个action,action中在commit一个mutation,在mutation中改变store中的值。

mutations

 index.js

methods:{

  add(){

    this.$store.commit(‘increment‘,10)

  }

}

 mutatons.js

mutations:{

  increment(state,n){

    state.count+=n;

  }

}

 ////////////////////////////////////////////////////////////////////////////

actions

/index.js

methods:{

  add(){

    this.$store.dispatch(‘increment‘,{num:1})

  }

}

/store/index.js

const app={

  state: {
    data:‘‘
  },

  actions:{

    increment({commit},count){

      commit(‘ADD_NUM‘,count.num)

    }

  },

  mutations:{

    ADD_NUM:(state,n)=>{

      state.data=n;

    }

  }

 }

export default app

//////////////////////////////////////////////////////////////

文中{commit}

es6中函数的参数是一个对象,函数中用的是对象中的一个方法,是可以通过对象的解构赋值直接获取到该方法的

因为actions中的函数中哟啊commit mutation,所以会获取到一个默认的参数context,它是一个store的实例,通过它可以获取到store的属性和方法,如 context.state 获取state属性,context.commit执行commit命令。所以把 

increment(context,count){

  context.commit(‘ADD_NUM‘,count.num)

}

简写成

increment({commit},count){

 commit(‘ADD_NUM‘,count.num)

}

 

如有不对的地方,请多多指教!      ——RLflash

vuex中的mutations、actions

原文:https://www.cnblogs.com/RLflash/p/8341052.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!