简述vueX通信

摘要：
在前面的文章，我们已经简述了vue中的父子组件通信以及在加入路由时借助路由进行兄弟组件之间的通信。
虽然已经实现了父子、兄弟之间的通信，但是当一个状体在多个页面同时具有，而且改变时也会一起改变，那么对于这种情况，之前的通信也是显得很乏力；这时vueX就派上大用处了，简单来说它就是一个顶级的状态管理机，使用它也是和使用路由一样，需要创建(定义)、在vue实例上去注入(使用)；它可以实现全局状态的响应式变更。
基于props down,event up 的理念，非父子之间的通信显得异常繁琐，如：

做个比喻，父子组件之间的通信是‘爬楼梯’，那么vueX的通信就是乘电梯；但vueX不能滥用，过多使用会影响组件的复用。举个栗子，从一楼到二楼需要坐电梯吗？这就是特定组件的状态不必使用vueX来通信。
vueX = 响应式 + 全局状态；
vueX的核心是store(仓库),它是一个包含state状态的容器。
特点：
1.当vue组件从store中读取状态时，若store中的状态发生变化，那么组件中的状态也会相应的响应式跟新。
2.我们不能直接改变store中的状态，唯一途径是 显示的提交(commit)mutation。
3.mutation中只能执行同步操作，action中做异步操作，且异步操作完成后，通过提交mutation请求改变全局状态。
接下来进入步骤：
1.先npm好所需要的工具；
2.创建store目录结构，import页面引入工具，vue使用vueX，创建store实例；


ps：(1.因为vueX支持对全局状态的模块化管理，所以这里定义了 app 和 user 两个模块以及一个getters来方便状态使用
2.默认情况下，模块内部(app/user)的 action、mutation 和 getter 是注册在全局的，这样使得多个地方能够对同一 mutation 或 action 作出响应)

3.定义模块中的全局状态(state/mutation/actions)
app模块：

getters模块：

ps:(getters可以理解为是全局状态(store)的计算属性，可以做一些简单的逻辑转换,映射时映射到组件computed)
user模块:

4.使用全局状态
第一步在main.js中注入

第二步在业务组件上使用
先引入映射函数

映射函数映射全局状态


ps：state/getters映射到computed，action映射到methods；
完成全局状态到业务组件的映射之后，就可以：
a. 像使用’计算属性’一样使用全
局状态。
b. 像调用’方法’一样调用全局
action。
c. 带有参数的action不能直接用
辅助函数映射。

简单就是：定义模块全局状态，映射到业务组件，业务组件使用全局状态，修改时，业务组件dispatch全局的action，模块内接受到相应的action时就显示的commit提交mutation，mutation被提交即相应函数改变state状态，state发生改变即业务组件中状态亦发生改变。

简单代码：
业务组件里：


app模块里：

业务组件里：


app模块里：

业务组件里：


user模块里：

最后，弄明白vueX的工作流程后还需要了解它的使用场景，勿滥用！