Vue 应用单元测试的策略与实践 04 - Vuex 单元测试

本文的目标
2.2 在Vue应用的单元测试中，对 Vuex store 该如何测试？如何测试与 Vue 组件之间的交互？

// Given
一个有基本的UT知识和Vue组件单元测试经验的开发者?
// When
当他?阅读和练习本文的Vuex单元测试的部分
// Then
他能够对Vuex概念的理解更加深入，且知道 Redux-like 架构的好处
他能够合理测试vuex store的mutation、getter中的业务逻辑和异步action
他能够测试组件如何正确读取store中的state以及dispatch action
如何理解 Vuex 模式？
Vuex 的前车之鉴
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

古人说「读史让人明智」，学习历史是为了更好得前行，为了能够认识现在，看清未来。让我们来看看 Vuex 的历史，Vuex 借鉴于 Redux，而 Redux 的实现构想则最初出身于 Flux ，这是一个由 Facebook 为其应用所设计的应用程序架构。Flux 模式在 JavaScript 应用里像是找到了新家一样，但其实只是借鉴了 领域驱动设计 (DDD) 和 命令-查询职责分离 (CQRS)。

CQRS 与 Flux 架构
描述 Flux 最普遍的一种的方式就是将其与 Model-View-Controller (MVC) 架构进行对比。

在 MVC 当中，一个 Model 可以被多个 Views 读取，并且可以被多个 Controllers 进行更新。在大型应用当中，单个 Model 会导致多个 Views 去通知 Controllers，并可能触发更多的 Model 更新，这样结果就会变得非常复杂。

而 Flux 以及我们要学习的 Vuex 则是试图通过强制单向数据流来解决这个复杂度。在这种架构当中，Views 查询 Stores（而不是 Models），并且用户交互将会触发 Actions，Actions 则会被提交到一个集中的 Dispatcher 当中。当 Actions 被派发之后，Stores 将会随之更新自己并且通知 Views 进行修改。这些 Store 当中的修改会进一步促使 Views 查询新的数据。

MVC 和 Flux 最大的不同就是查询和更新的分离。在 MVC 中，Model 同时可以被 Controller 更新 并且 被 View 所查询。在 Flux 里，View 从 Store 获取的数据是只读的。而 Stores 只能通过 Actions 被更新，这就会影响 Store 本身 而不是 那些只读的数据。

以上所描述的模式非常接近于由 Greg Young 第一次所提出的 CQRS：

如果一个方法修改了这个对象的状态，那就是一个 command （命令），并且一定不能返回值。
如果一个方法返回了一些值，那就是一个 query ࿰