理解 Vuex 中的数据流

如果你和我一样，第一次接触 Vuex 时，可能会疑惑“这玩意儿到底是怎么运作的？”这类状态管理系统的工作原理并不那么显而易见，尤其是对于有 SQL 背景的人来说。而且，我真的需要它吗？事实上，Vuex 文档中有一句话很好地概括了这一点：

Flux 库就像眼镜：你会知道什么时候需要它们。

• 丹·阿布拉莫夫

Flux、Vuex、Mobx……这些带“x”的到底是什么？嗯，我的数据模糊不清到一定程度后，我意识到我需要一副Vuex眼镜。于是，我前往Vuex网站，想看看它到底有什么神奇之处。

也许是我自己的问题，也许是我老了，但那个网站对Vuex的工作原理解释得实在太糟糕了。它看起来非常复杂繁琐，我实在不想用它。那些核心概念和应用结构，唉。

幸好，我深入研究后发现，它其实并没有那么复杂。我只需要把它简化成一张草图就行了。

锵！清清楚楚！

或许我应该再详细解释一下。

Vuex 是一种将所有数据集中到一个地方的方法。

从根本上讲，Vuex 就是这样的。这叫做为你的应用程序提供一个“数据源”。你的组件会连接到 Vuex 来访问存储在那里的共享数据。但这究竟是如何运作的呢？

数据保存在州政府中

数据保存在stateVuex 数据存储中。你的组件可以读取这些数据，并且由于它是响应式的，因此当状态中的数据更新时，组件自身也会更新。应用程序中的每个组件都在监听同一个状态，所以所有组件都能保持同步。

数据通过突变而改变

既然数据已经导入，可以直接更新，对吧？

不。

关于 Vuex，一个重要的概念是：你不应该state直接修改 `<div>` 标签。它只能通过 `mutation` 来修改mutation。所有state修改都必须通过 `mutation` 来实现。永远如此。记住这一点，你就没问题了。

此外，变更操作应该非常简单，只需获取数据并将其设置到状态中即可。任何包含更多逻辑的操作都将放入动作中，您接下来将看到。

为什么你只state通过以下方式更改mutations？

请去看看我写的文章《为什么你应该始终在 Vuex 中使用 mutations》。你会在里面看到我对 mutations 的一些看法。

与数据相关的逻辑操作在 Actions 中运行

有时可能会有一些与数据相关的逻辑操作，例如通过 AJAX 调用将数据导入应用程序，或者使用生成器创建新的 GUID。这些操作不应该放在特定的组件中，因为它们是数据操作，所以应该与数据放在一起。这就是操作的作用。

任何耗时较长的操作都应该放在一个动作（action）中。同样，动作本身不会更新状态（state），但它们可以调用更新状态的变更（mutation）。

Getter 用于对数据进行常见的筛选和格式化。

Getter 的用法与 Vue 组件中的计算属性非常相似，它提供了一种从状态中获取经过过滤或格式化的数据的方法，任何组件都可以连接到这些数据。与在每个组件中都创建一个计算属性不同，您可以创建一个新的 getter，组件可以共享它，并在状态更新时更新该 getter。

关于访问状态时是否应该始终使用 getter的问题，我最近也回答过。如果你也对此感到疑惑，可以去看看那篇文章。

所以实际上，这只是另一种访问状态的方式（但永远不会更新它！）。

希望这篇文章能帮助你更好地理解 Vuex 的工作原理，如果你之前一直为此感到困惑的话。我知道它对我有帮助。