Vuex是如何工作的？

什么是Vuex？

Flux-inspired Application Architecture for Vue.js

Vuex实际上是类Flux的数据管理架构。它主要帮我们更好的组织代码，更好的让Vue中的状态更好的通过状态管理维护起来。在实际项目运用中我们需要对组件的 组件本地状态(component local state) 和 应用层级状态(application level state) 进行区分。
Vuex的作用就是汇集应用层级的状态到一处，方便管理。

说状态其实有些同学可能不太理解，那么在刚上手Vue的时候做过的例子中，一个Vue实例中都会有data，那么这个data中保存的属性其实就是可以理解为状态。

试想这样的场景，比如一个Vue根实例下面有一个根组件名为App.vue，它下面有两个子组件A.vue和B.vue，父组件和子组件之间使用Props通讯是没问题的，通过绑定Props轻松的实现。

但是如果我们需要A.vue组件和B.vue组件之间通讯呢？因为组件实例的作用域是孤立的，它们之间是不能直接通讯的。那么只能借助共有的父组件通过自定义事件实现。

A组件想要和B组件通讯往往是这样的：

• A小弟说：“报告老大，能否帮我捎个信给你的小弟B组件？”，它需要dispatch一个事件给App

• App老大说：“包在我身上”，它需要监听A组件dispatch的事件，同时需要broadcast一个事件给B组件。

• B小弟说：“信息已收到。”，它需要on监听App组件分发的事件。

这只是一条通讯路径，那么如果父组件下有多个子组件，子组件之间通讯的路径就会变的很繁琐，父组件需要监听大量的事件，还需要负责分发给不同的子组件。很显然这并不是我们想要的组件化开发体验。

Vuex就是为了解决这一问题出现的。

Vuex是如何工作的？

下面这张图很好的诠释了Vuex和组件之间的通讯关系。

这张图描述的很棒，完整的数据流闭环，整个应用的数据流是单向的。对我们理解Vuex和Vue的组件间的通讯关系很有帮助。

需要掌握的：

• 用户在组件中的输入操作触发 action 调用；

• Actions 通过分发 mutations 来修改 store 实例的状态；

• Store 实例的状态变化反过来又通过 getters 被组件获知。

•