上一篇写了组件通讯，感觉通讯方法很不统一，对于大项目来说，可能是灾难性的路线。vuex为我们提供了一个内存级别的db，存储我们需要处理的数据。还为我们提供一条确定方向的路径给我们进行数据转换处理。state 的数据只能由Mutations 改变，并且这里的方法不能进行异步处理，如果需要异步处理，只能在Action中。如果不需要异步处理，其实也是可以直接调用Mutations来修改state中的数据的。

上面的路径可以这样解释：页面的组件通过Dispatch 来调用Vuex的Actions 进行Actions逻辑处理数据，将处理好的数据通过commit 进行Mutations 调用进行数据逻辑处理并且修改state中的存储的数据，state 是响应式的，只要state中的数据发生修改，会重新渲染组件。这是一条非常精确的路径，state是全局的，所有的组件都可以直接访问。在使用vuex前后的组件通讯如下图所示：

如上图，组件1向组件2发送消息，可能的路径是1->3->4->5->6->2 或者通过EventBus，那如果2 传给4,4传给6呢，那就得非常的复杂操作了。使用Vuex就非常简单了，state中存储所有需要动态传递的数据，如果需要，直接从state中获取就可以了。

vuex如同这次疫情，统一由中央指挥，统一对外发布消息，各个省份可以通过Mutations来向中央上传数据。中央数据修改后就会正式对外发布，然后各地方都可以直接接收到消息。

Vuex有四大核心，Action、Mutations、getter、State、module。

Action：组件需要通过Dispatch 来调用Action，在Action中可以进行异步逻辑处理，例如使用ajax来获取db数据等。当然，也可以不进行异步逻辑处理。Action 通过commit将数据传递给Mutations处理，以完成对state的相关数据修改，Action不能直接修改state中的数据；

Mutations：不能进行异步逻辑，是唯一可以修改state中的数据方法块。

Getter：可以对sate中的数据进行获取，并且进行二次加工的逻辑块。

State：存储数据的数据中心，具有响应式特点，即数据发生修改，会自动渲染到组件。

Module：将store进行划分模块，相互之间就不进行干扰。

下面各个介绍相关的使用：

1、使用vuex:

1）安装vuex，npm install vuex --save

2）import Vuex from 'vuex'

Vue.use(Vuex) //在vue中挂载vuex

下面介绍各部分的使用方法

1、state:数据存储中心，状态中心，使用方法有二种

1)使用 this.$store.state.属性名称，例如：this.$store.state.属性名称

2)使用 mapState 方式来调用,将全局变量设置为可计算属性，然后调用

import { mapState } from 'vuex'

2、Mutation:可以修改store数据的方法块，不允许有异步逻辑，使用方法有二种：

1）使用 this.$store.commit('Mutation的方法名称','参数')，如下图：

2）使用 mapMutations 方式来调用,将全局变量设置为监控方法，然后就可以使用this.mutations方法来调用了，如:

3）Action，允许处理异步逻辑，一般可在action里写db数据处理。Action也可以有二种方式执行；

1）this.$store.dispatch() 方式调用执行，如下图：

2）import { mapActions } from 'vuex' 方式调用

4、Getter ,用于对Store中的数据进行加工处理形成新的数据，类似Vue的计算属性;Store中的数据发生变化，Getter的数据也会跟着变化。有二种方法进行调用：

1）this.$store.getters.方法名称，如下图：

2）通过import { mapGetters } from 'vuex',然后设置计算属性，如下图：

5、Module 将state进行模块划分。

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 的状态

好了，vuex 就先这么多东西，已经够我们的vue-dx 使用了。