何时、为何以及如何使用 Vuex

您将从本文中得到什么？

本文旨在教您如何在高级、大型且复杂的 Vue.js 网站和 Web 应用（Web 应用）中使用流行的Vuex存储。这绝不是一份完整且绝对的指南。它仅用于告知您何时应该考虑将 Vuex 添加到项目中，为什么在这种情况下应该使用 Vuex，以及如何首次开始使用 Vuex。

本文将使用一些简单示例，其中可能不需要 Vuex。但这些示例仅用于帮助您掌握一些概念，因此请记住这一点。

什么是 Vuex？

大多数 JavaScript 框架都有所谓的store。你可能已经多次遇到过这个术语了。它到底是什么意思？它是一种存储吗？还是跟电子商务有关？

嗯，不完全是🤷‍♂️

可以说，Store 是你在所选 JavaScript 框架中创建高级应用程序和网站的关键。无论是 Vue.js、React、Ember 还是 Angular。当然，这并不意味着你必须使用Store 才能创建高级 Web 应用。即使使用特定框架提供的简单内置功能，你也能创建一个相当高级的网站。然而，Store 能让你更好地掌控复杂、庞大（更不用说）的网站/Web 应用的混乱局面。Store 可以帮助你更好地组织某些内容，例如状态。

网站或 Web 应用的状态对于提升与用户的交互性至关重要。如果您曾经使用 props 向子组件发送数据，并使用自定义事件（使用this.$emit）将数据返回给父组件，那么您所做的就是管理状态。例如，传递 props 来告知子组件列表中的所有项目，并发出事件来告知父组件某个项目已被划掉，这便是管理该列表的状态。

因此，跟踪和管理我们网站的状态非常重要。Vuex 可以帮我们完成这项工作。

为什么要使用 Vuex？

Vue 并不局限于使用特定的 store。我们可以使用许多 store。例如Redux，它是一个非常流行的状态管理库，几乎所有 React 用户都在使用它。虽然你可以在 Vue 中使用 Redux 和其他 store，但最好还是使用 Vuex。

原因在于，Vuex 与 Redux 一样，也受到了 Flux 的启发，并且旨在充分利用 Vue 提供的开箱即用功能。首先，Redux 中的状态是不可变的，并且在更改时会完全替换，而 Vuex 提供了一种非常特殊的方法来改变状态。

Vuex 更强大的地方在于，组件从 Vuex 存储中获取其状态，并且能够在存储状态发生变化时做出反应并高效地更新。

由于 Vuex 提供了如此多的功能，因此在为您的 Vue 项目选择状态管理工具时，它应该是您的首选。

什么时候使用 Vuex 合适？

Vuex 功能强大、效率高，并且帮我们处理了很多事情。所以我们应该多用它，对吗？错了！

仅仅因为某个功能/工具/库提供了很多优点并不意味着它应该一直被使用。

VueRouter 就是一个很好的例子。尽管它包含一些非常实用的功能，但你可能不会在所有网站中使用。有些网站不需要路由器。也许有像 Express 这样的后端来处理页面的路由，或者你有一个使用动态组件的单页应用程序 (SPA)。同样，并非所有网站或 Web 应用程序都适合使用 Vuex。

简单来说，这就像你只是想买一部能打电话的智能手机。一部手机有不错的摄像头、256GB 的存储空间，还有能玩高端游戏的运行内存。但如果你只想打电话，你真的需要所有这些吗？

我们的 Vue 项目和 Vuex 是一样的。Vuex 提供的功能必须是必需的，否则非但无用，反而会成为网站的负担。在某些情况下，你可以使用 Vue 的基本功能，而有时你真的需要 Vuex 的强大功能。那么，什么时候应该考虑使用 Vuex？

Vuex 的核心是一个 store，它将我们应用程序的所有状态集中保存。通常，我们会使用 props 和自定义事件来跟踪状态。只要我们的网站包含一些会改变状态的组件，这样做就没问题。但如果你的项目变得更大、更复杂，会发生什么情况呢？

组件会越来越多。Props 会被传递给更多组件，大量的自定义事件会被触发。谁改变了那个状态？它应该是其他状态，但某个组件改变了它。等等……那个组件是如何访问它的？它又是谁？！

你看，真是乱！当网站组件增多、复杂性增加时，你需要组织状态变更的流程。在这种情况下，集中式 Vuex 存储就能派上用场。Vuex 用于小型或简单的应用/网站，就像我们之前提到的智能手机示例一样，有点矫枉过正。只有当你觉得项目复杂到需要一些管理帮助时，才应该使用它。

如何开始使用 Vuex

我不会深入讲解 Vuex 的使用方法。以上只是一些 Vuex 的基本概念。本节将提供一些简单的示例，用于在 Vuex 存储中更改状态以及检索状态。

第一步是安装 Vuex。

npm install vuex

最好将所有 Vuex 逻辑保存在一个单独的文件中。我们将把逻辑保存在一个名为 的文件中store.js。当然，你可以随意命名。我们将在这个文件中保存我们的 store 对象，然后main.js将其导入到全局 Vue 实例中注册。

在我们的store.js文件中，我们有一个store对象，它是我们的 Vuex 存储。我们需要在存储中存储一些数据，这些数据随后会被其他组件变异或更改并检索。我们可以使用预定义的关键字 向存储中添加数据state。我们可以像在常规 Vue 实例中一样使用它data()。在我们的存储中，我们已经有一个 counter 数据属性。现在我们需要从组件中检索它。让我们从组件中检索counterApp.vue。我们可以使用命令 来执行此操作。由于我们在文件中注册了 Vuex 存储，this.$store.state.counter因此可以使用关键字。$storemain.js

现在，还有另一个在检索数据时会经常使用的概念。在某些情况下，您需要在使用数据之前对数据进行处理或执行一些数学运算。如果这项工作对于不同的组件是不同的，那么只能为每个组件单独实现它。但是，如果所有组件的操作都是相同的，那么您可以使用getters。使用 getter，我们可以对数据执行操作，然后检索最终结果。getter感觉类似于函数。但它是不同的。这是因为 getter 需要状态对象。Vuex 自动将其传递给 getter。我们已经使用我们的counter数据属性来跟踪按钮被点击的次数，然后我们检索它。那么，在显示它们之前，我们将点击次数翻倍怎么样？我们可以使用 getter 来实现这个结果。

我们已经创建了 getter。让我们在App.vue组件中使用它。请记住，我们必须使用 getter，所以不能使用this.$store.state。对于getter，我们使用this.$store.getters。

记住只使用 getter 的名称。在我们的示例中，这意味着使用doubleClicks而不是 doubleClicks()。这是因为即使它看起来像一个常规函数，也无需运行它。可以将其想象为将回调函数附加到事件监听器。就像回调函数自动调用一样，Vuex 也会自动调用并执行 getter。

最后，我们将看到mutations。当改变数据属性的状态时，只需提交该改变即可。对数据属性进行的更改在改变中指定。然后，可以从任何组件更改状态，并且仍然以相同的方式更新。

我们counter通过手动增加数据属性来更改它。让我们创建一个突变来代替它。为了对其进行突变，mutations我们还需要访问状态对象。

在使用突变时，情况会有所不同。与getter和state不同，突变的访问方式并不像 那样this.$store.mutations。相反，如前所述，突变提交后，我们会在括号中指定突变的名称。

在这里，我们告诉 Vuex提交名为 的突变increment，或者换句话说 - 执行名为 的突变increment。

以上示例非常简单，你不应该在这样的场景下使用 Vuex。但我希望你能够理解一些使用 Vuex 的基本概念。

至此，您已经学习了必要的概念，可以开始探索此状态管理工具的高级用法。现在，您应该能够决定项目是否需要 Vuex，以及如何使用它。