简介

在上一章中，您学习了如何使用事件总线模式来帮助解决一个重要问题：在复杂且高度嵌套的组件集之间来回通信事件。事件总线模式提供了一个简单的发布和子系统，通过该系统，任何组件都可以发出事件，并且任何组件也可以侦听该事件。虽然针对这个问题编写自己的解决方案是保持编码技能敏锐的好方法，但在这种情况下，最好使用 Vue 社区中已经使用的已开发且经过充分测试的解决方案 — Vuex（https://vuex.vuejs.org/):

Figure 1. Figure 9.1: The Vuex home page

Vuex 是 Vue 生态系统的核心部分，提供了我们在上一章中已经构建的内容以及更多内容。让我们从高层次看一下 Vuex 的主要特性。

Store

在较高的层面上，一个 Vuex 实例或 Vuex 的一种使用被视为一个存储(store)。store 是顶级容器，采用以下小节中描述的所有内容。

State

Vuex 最重要的方面是它所代表的状态或数据。这是所有组件都可以依赖的单一事实来源。当状态发生变化时，每个使用该状态的组件都可以确保其副本始终保持同步。想象一个可以让您编辑博客条目的 Vue 应用程序。该存储可以包含博客条目本身以及您正在编辑的当前博客条目的值。当博客条目在一个地方编辑时，使用它们的任何其它地方都会立即更新。

Getters

虽然 Vue 可以直接从 Vuex 实例读取状态数据，但有时您可能需要为数据本身提供额外的逻辑或抽象。与 Vue 为虚拟或派生数据提供计算属性的方式非常相似，getter 为需要在返回数据之前操作数据的情况提供了状态抽象。回到我们之前处理博客条目的示例，想象一个按视图返回顶部博客条目的 getter。getter 抽象了博客条目的 “流行程度(popular)” 逻辑，并让您将来可以轻松更改该逻辑。

Mutations

在 Vuex 中使用状态数据的组件永远不会直接修改该数据。相反，组件可以执行突变(mutation)。将其视为来自组件的命令，让 Vuex 执行对其状态的更改。通过使用突变将更改包装到状态，Vuex 可以确保使用该状态的每个组件都保持最新的更改。

Actions

操作类似于突变，只不过它们必须用于处理异步更改。异步操作是需要不确定的时间才能完成的任何逻辑。最常见的示例是对远程 API 的网络调用。同步调用是立即执行并完成的调用。当您看到它们被使用时，它会更有意义，但一般来说，任何异步都应该通过操作来完成，而同步逻辑可以通过突变来完成。一旦操作完成了需要做的任何异步工作，它们通常会链接到突变。

Modules

本章将介绍 Vuex 的最后一个方面是模块。模块只是为大型应用程序打包更复杂的数据集的一种方法。虽然一种简单的状态可能适合典型的应用程序，但更大的应用程序可能具有更复杂的状态，需要通过模块进行更好的组织。在第 11 章 “使用 Vuex – 组织更大的存储” 中，您将看到如何使用模块来更好地组织 Vuex 实例。