[译] 状态管理中的第一性原理

原文：michaelnthiessen.com

理解如何使用 Vuex 固然重要，但我想谈谈比那更深入的东西。

如你所见，在任何前端框架中，包括 React、Angular 和 Svelte -- 这只是其中很少几个的名字，关于状态如何运转都存在着很多基础性的概念。

理解这些概念有助于使用任何种类的状态管理工具，包括 Vuex。

但是这次我要只聚焦在一件事情上：一件普遍存在于这些框架中的事情；一件将帮助我们更好理解关于状态的争论的事情。

第一性原理（The First Principle）

译注：第一性原理又称“第一原理”。其实是古希腊哲学家亚里士多德提出的一个哲学术语：“每个系统中存在一个最基本的命题，它不能被违背或删除。”

在前端框架的状态管理方面，这就是：

在组件树中，数据只向下流动，从不向上流动。

在你的 Vue 应用中，一个组件中的数据只能被传递到子组件中，而不能反其道行之。

当然了，scoped slots 是个例外；但这不妨碍我在这里的观点。

这是个非常简单的原理，但我想要探索其蕴含的一些涵义。

涵义 #1

如果数据只向下流动，那么数据所生存之处应该高于其被应用之处。

这包括了所有用到状态的地方。

所以，理解了这一点，你就会把所有数据都放到根组件中，那可是尽可能最“高”的地方了。

当然，你是不会那样做的，但是为什么不呢？

涵义 #2

把一切放进根组件解决了涵义 #1，但我们遇到了另一个问题：

我们不得不将所有东西都作为 props 在树上向下传递，过多的属性会让事情变得过于复杂和凌乱。

这也破坏了关注点分离原则。所有组件都将知道所有这些属性，即便组件根本用不到它们。

但你已经知道这是个坏注意了，原因呢？

数据应该接近使用它的组件，并且我们应该通过将数据保持在组件树向下流动的方向上尽可能远的地方来保持其接近性。

不用担心，我们会进一步解释这些……

涵义 #3 (终极观点)

我们已经确定了数据只应该向下流动的原则。

以及从此学到的两件事情：

1. 数据应该被放置在组件树中的高处

2. 数据应该在组件树中尽可能低的位置

看起来我们在这里陷入了一个悖论……

但是这种事也发生在我阅读圣经的时候，我新学到的关于上帝的一些事情好像和之前我学过的相矛盾。

其实，只需要再更深入一些、想得更多一些。

在思考了一会这个问题后我得出了这样的结论：

数据应该被放置在向下流动的组件树中尽量远，同时也是离需要其的组件足够高的地方，以便能够向组件提供数据。

如果能平衡好这两点相反的约束，就能找到状态应该在的那个点。

如果状态只用于一个组件，将其留在组件内即可。

如果状态用于多个组件，将其放到父组件中或抽离出来。