介绍 #

什么是状态管理 #

在开发中，我们会的应用程序需要处理各种各样的数据，这些数据需要保存在我们应用程序中的某一个位置，对于这些数据 的管理我们就称之为是 状态管理。

在前面我们是如何管理自己的状态呢？

• 在 Vue 开发中，我们使用组件化的开发方式；
• 而在组件中我们定义 data 或者在 setup 中返回使用的数据，这些数据我们称之为 state；
• 在模块 template 中我们可以使用这些数据，模块最终会被 渲染成 DOM，我们称之为 View；
• 在模块中我们会产生一些行为事件，处理这些行为事件时，有可能会修改 state，这些行为事件我们称之为 actions；

复杂的状态管理 #

JavaScript 开发的应用程序，已经变得越来越复杂了：

• JavaScript 需要管理的状态越来越多，越来越复杂；
• 这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等；
• 也包括一些 UI 的状态，比如某些元素是否被选中，是否显示加载动效，当前分页；

当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

• 多个视图依赖于同一状态；
• 来自不同视图的行为需要变更同一状态；

我们是否可以通过组件数据的传递来完成呢？

• 对于一些简单的状态，确实可以通过 props 的传递或者 Provide 的方式来共享状态；
• 但是对于复杂的状态管理来说，显然单纯通过传递和共享的方式是不足以解决问题的，比如兄弟组件如何共享数据呢？

vuex 的状态管理 #

管理不断变化的 state 本身是非常困难的：

• 状态之间相互会存在依赖，一个状态的变化会引起另一个状态的变化，View 页面也有可能会引起状态的变化；
• 当应用程序复杂时，state 在什么时候，因为什么原因而发生了变化，发生了怎么样的变化，会变得非常难以控 制和追踪；

因此，我们是否可以考虑将组件的内部状态抽离出来，以一个全局单例的方式来管理呢？

• 在这种模式下，我们的组件树构成了一个巨大的 “试图 View”；
• 不管在树的哪个位置，任何组件都能获取状态或者触发行为；
• 通过定义和隔离状态管理中的各个概念，并通过强制性的规则来维护视图和状态间的独立性，我们的代码边会 变得更加结构化和易于维护、跟踪；

这就是 Vuex 背后的基本思想，它借鉴了 Flux、Redux、Elm（纯函数语言，redux 有借鉴它的思想）