像给五岁小孩听一样解释 (ELI5) Vuex

我经常看到 Vue 新用户问：“Vuex 是什么？”或者“谁能用五岁小孩都能听懂的方式解释一下 Vuex 是什么？”通常得到的回答是“Vuex 是一种 Flux 模式，用于从集中式全局对象存储库中存储和检索数据”。虽然技术上没错，但这种回答总是让我摸不着头脑，不禁怀疑这个人到底跟哪些五岁小孩混在一起？我五岁的时候，比起学习编程模式，我更喜欢玩玩具卡车或者踢足球。

当这个问题出现在Reddit上时，我花了一些时间思考如何用简洁明了的方式向五岁小孩解释Vuex。我觉得用自动售货机来比喻Vuex很贴切。
如果你用过自动售货机，就知道用户可以通过按钮购买商品。机器需要进货；需要有人把商品送到机器；还需要一个机制把用户选择的商品送到他们手中。

让我们一起来了解一下 Vuex 的不同概念，看看如何才能最好地将它们与自动售货机联系起来。

状态

Vuex 的状态概念本质上就像自动售货机里的库存。它可以是任何东西，从薯片、饼干到字符串，甚至是整数、数组或对象。

自动售货机似乎可以出售任何种类的商品，Vuex 也是如此。Vuex 可以承载任何类型的 JavaScript 代码。但请记住，Vue 的响应式特性限制同样适用于 Vuex。

获取器

投币器是您从自动售货机中取出物品的方式。如果您想购买饼干，只需投入硬币并按下按钮即可获得商品。 

在 Vuex 中，getter 比简单的自动售货机按钮强大得多。你不仅可以获取单个商品，还可以只选择巧克力曲奇饼干。你甚至可以将状态中的各种元素组合起来，创造出以前从未存在过的东西。 

Getter 是一种强大的数据处理方式，可以用来筛选数据，只获取你需要的条目，或者根据状态中已有的数据创建新条目。
如果你熟悉 Vue 的计算属性，那么它们与 Vuex 的 getter 非常相似。

突变

当自动售货机是新购置的或者库存不足时，就需要有人来补充商品。我们通过各种方式来补充 Vuex 自动售货机的库存。

当我们收到 Vuex 自动售货机后，我们不希望更改其中的内容，因为这可能会破坏 Vue 的响应式设计。您应该确保所有字段或待售商品都已提前设置好。

行动

有时当你去自动售货机补货时，可能发现缺少一些必需品。这时，你不会离开自动售货机去取货，而是会打电话给朋友（异步请求）让他帮忙取货并送过来。

等你的朋友带着货物到达后，你就可以把变异体放进自动售货机里了。

你可以在我的个人博客drewtown.dev上找到这篇文章以及更多其他文章，或者考虑在Twitter上关注我。