vuex中的mutations、actions

//阅读本文需要一点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

转载于:https://www.cnblogs.com/RLflash/p/8341052.html