Vuex是什么，有什么用？（新手必看）

如果在一个大家族中出现了内部沟通无法解决的问题，那么最好的解决办法是什么？最好的解决办法无非就是请一个外部的“和事佬”当作媒介，让“和事佬”作为信息传递的中间转换层，这样就可以解决信息传递的层次问题。

Vuex 就是这个大家族中的“和事佬”，它是一个专门为 Vue 应用程序开发的状态管理器。

Vuex 采用集中式存储管理应用的多个组件之间的共享状态数据，并以相应的规则保证状态以一种可预测的方式发生变化。利用 Vuex 可以存储任意层级的组件数据内容，在其他任意层级的组件需要对应的数据时，只需直接从其数据仓库中获取与修改即可，如下图所示。


在如图 1 所示的通信流程中，任意层级的组件都可以直接获取或修改数据仓库中的数据，也就是组件与数据仓库之间可以相互通信。

Vuex 中的 7 个核心概念需要读者强化理解，如下表所示：

表：Vuex 中的核心概念

核心概念	作用
store	管理状态数据的“大管家”对象，只有一个
state	包含 n 个状态数据属性的对象
getters	包含 n 个基于 state 的计算属性的对象
mutations	包含 n 个直接更新状态数据的方法的对象
actions	包含 n 个执行同步或异步操作后间接更新状态数据的方法的对象
modules	包含 n 个 Vuex 模块对象的对象
plugins	配置 n 个 Vuex 插件的数组

下图所示为 Vuex 的结构，描述了 Vuex 内部的重要结构及其与 Vue 组件、后端接口和 Vuex 开发者调试工具（devtools）的交互关系。


这里整体对 Vuex 进行简单介绍，读者大致有一个了解即可，等真正使用过后，就会对这个结构有一个更真切的理解。

创建一个 Vuex 的 store 对象来统一管理多个组件之间共享的状态数据。在创建 store 对象时，可以配置 state、getters、mutations 和 actions 这 4 个对象，组件之间共享的状态数据在 state 对象中指定，而基于状态数据的计算属性可以在 getters 对象中定义。

任意层级的组件都可以通过 state 对象来读取状态（state）数据或 getters 计算属性进行页面的动态初始显示，并且一旦状态数据发生变化，组件就会自动更新显示。

当某个组件需要通过更新状态数据来更新页面显示时：

• 一种情况是在 mutations 对象中定义直接同步更新状态数据的函数，在组件中通过调用 store 对象的 commit 方法来触发对应的 mutation 方法执行，一旦状态数据更新，读取状态数据显示的组件就会自动更新显示；
• 另一种情况是在更新状态数据前，如果需要执行异步操作或一些逻辑处理，就需要在 actions 对象中定义 action 方法，在其中执行异步操作（如发送 AJAX 请求获取数据）或逻辑处理，在更新状态数据时，执行 commit 方法触发特定 mutation 方法执行来更新状态数据。而在组件中可以通过 store 对象的 dispatch 方法触发特定 action 方法执行来最终更新状态数据，从而触发组件页面更新。

先前安装的 Vue 开发者调试工具中包含了 Vuex 的调试工具（也就是 vue-devtools），在初始化状态产生后或 mutation 方法调用状态更新后，它都会记录下最新的状态数据，开发人员可以通过观察状态数据的变化辅助程序的开发调试。

Vuex 虽然解决了任意组件之间的通信需求，但它是一个库，其本身涉及的概念与知识点还是很庞大的。