(1)同步与异步
在 mutation 中混合异步调用会导致你的程序很难调试。
例如,当你调用了两个包含异步回调的 mutation 来改变状态,你怎么知道什么时候回调和哪个先回调呢?
这就是为什么我们要区分这两个概念。在 Vuex 中,mutation 都是同步事务:
store.commit(event-name) /* 任何由 "event-name" 导致的状态变更都应该在此刻完成 */
为了处理异步操作,vuex出了Action
(2)注册:定义actions动作提交mutation异变函数
目前为止,我们看到,当点击后页面上的值是改变了。我们达到了修改store中状态值的目的,但是,官方并不推荐我们这样直接去修改store里面的值,而是去提交一个actions,在actions中提交mutation再去修改状态值,接下来我们修改index.js文件,先定义actions提交mutation的函数:
【store/index.js】
(3)触发:分发 Action
Action 通过 store.dispatch 方法触发
把commit提交mutations修改为使用dispatch来提交actions,之后我们再点击页面,效果是一样的。
(4)优势---异步执行
乍一眼看上去感觉多此一举,我们直接分发 mutation 岂不更方便?实际上并非如此,还记得 mutation 必须同步执行这个限制么?Action 就不受约束!可以在 action 内部执行异步操作。
【store/index.js】---①异步注册:定义actions动作提交mutation异变函数
【.vue单文件组件】---②触发:分发异步Action
(5)载荷方式和对象方式进行分发
Actions 支持同样的载荷方式和对象方式进行分发
①载荷形式
②对象形式类似
(6)组合 Action----promise
Action 通常是异步的,那么如何知道 action 什么时候结束呢?更重要的是,我们如何才能组合多个 action,以处理更加复杂的异步流程?
首先需要明白 store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise,并且 store.dispatch 仍旧返回 Promise.如果利用 async / await,也可以实现其他组合 action
一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下,只有当所有触发函数完成后,返回的 Promise 才会执行。
这个之后章节再做介绍。
.