Vuex学习（二） ——vuex过程

Vuex学习（二） ——vuex过程

一、vuex过程

action 消息模块

state 存储数据

view 组件视图

通信流程：

一个组件发送消息，消息被action模块捕获，并根据消息类型，处理数据，action将新的数据传递给state去存储，state中的数据发生了改变，将新的数据传递给另一个组件

在vuex中，把action分为两类：

一类是同步消息：mutation

​ 为了可测试

一类是异步消息：action

​ 为了异步操作

二、store组成

上图中，绿色虚线部分就是vuex,在代码中用store实现

由于vuex实现的是单一数据源的特征，所以整个应用程序中，有且只有一个store

在store中，由五部分组成：

（1）state:存储组件共享的数据

（2）getters:存储组件间共享的计算属性数据

getter与state的关系与data与computed的关系是一样的

（3）mutations :订阅同步消息的模块

通过commit方法来提交同步消息

（4）action :订阅异步消息模块

通过dispatch方法来提交同步消息

（4）action :订阅异步消息模块

通过dispatch方法来提交同步消息

（5）modules :用来切割模块的

注意：如果没有异步消息就直接触发同步消息