vue 使用vuex来进行组件之间的通信

紧接着上一篇vue父子组件之间的通信，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏。

1. 多个视图依赖于同一状态。
2. 来自不同视图的行为需要变更同一状态。来自不同视图的行为需要变更同一状态。

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
state
Vuex里的state相当于一个全局的state，你可以在component的任何地方获取和修改它。使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。

//获取state
this.$store.state.count

//vuex的辅助方法
import { mapState } from 'vuex'
computed：mapState([
  'count'
])

getters
Vuex里的getters类似于computed，有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数，如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

//直接使用
this.$store.getters.doneTodosCount

//使用辅助方法
import { mapGetters } from 'vuex'
computed：mapGetters({
  doneCount: 'doneTodosCount'
})

mutations
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然。用不用常量取决于你——在需要多人协作的大型项目中，这会很有帮助。但如果你不喜欢，你完全可以不这样做。

一条重要的原则就是要记住 mutation 必须是同步函数，mutation 中的异步函数中的回调，当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。（通常请求和计时器方法都是异步函数）

//触发mutations
this.$store.commit('xxx')

//辅助函数
import { mapMutations } from 'vuex'
methods：mapMutations(['increment' ])

actions

对于Action的官方解释如下。
类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

个人理解如下：
如果有异步的复杂逻辑并且可以重复调用就使用Action。

//触发action
store.dispatch('increment')

//辅助函数
import { mapActions } from 'vuex'
methods：mapActions(['increment' ])

Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态