action mutation 调用_vue学习笔记9：vuex中Mutation和Action的区别

一个重要的原则就是Mutation必须是同步函数，这里主要是一个原则，一个约定，主要是为了方便我们追踪state的变化，Mutation中采取异步函数仍然是有效的，可以实现对state状态的更改，但是不推荐

官网说明现在想象，我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。

每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照。

然而，在上面的例子中 mutation 中的异步函数中的回调让这不可能完成：

因为当 mutation 触发的时候，回调函数还没有被调用，

devtools 不知道什么时候回调函数实际上被调用——

实质上任何在回调函数中进行的状态的改变都是不可追踪的。//两个Mutation方法都是有效的，但是我们只推荐使用第一个，同步的方式

resetNickname1(state,newName){

state.nickname=newName

}

resetNickname2(state,newName){

setTimeout(()=>{

state.nickname=newName   //修改是有效的

},3000)

}

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

因此在Action中，实际是不进行状态的直接更改的，而是通过commit触发mutation的方式//在action中同步修改state，同样是成功的，只是不符合原则，推荐使用第二种方式

changeNickname1({commit,state},newName){

state.nickname=newName    //修改是有效的

},

changeNickname2({commit},newName){

setTimeout(()=>{

commit('resetNickname',newName)

},3000)

},

结论Mutation中是同步函数和Action中是异步函数，属于一种约定，为了更好的追踪vuex的状态变化，希望我们都按照这种原则进行开发

Mutation必须是同步函数

更改state的唯一方法是通过提交 mutation

Action中不进行状态的直接更改，而是通过commit触发mutation

mutation的触发通过store.commit来进行

action的触发通过store.dispatch进行