前言
Vue.js 是一个令人印象深刻的前端框架，它在构建复杂应用程序时能够提供更好的组织性和可维护性。Vuex 则是一个专门为 Vue.js 设计的状态管理库，它可以让我们以一种可预测的方式管理应用程序的状态。本文将介绍如何在 Vue.js 中正确使用 Vuex 关联普通数组，以及如何从中受益。
Vuex 状态管理库简介
Vuex 是一个专门为 Vue.js 设计的状态管理库，它使得我们可以更好地组织和管理我们的应用程序状态。Vuex 的状态存储在单个的状态对象中，它允许我们以一种可预测的方式管理应用程序的状态。
Vuex 中的状态由三部分组成：state、mutations、actions。其中，state 是存储应用程序状态的地方，mutations 是修改状态的地方，而 actions 则是在应用程序中执行异步操作的地方。
关联普通数组
在应用程序中，有时我们需要使用普通的 JavaScript 数组来存储一些状态。例如，我们可能会在购物车中使用一个商品数组来记录用户已选购的项。但是，使用普通数组可能会使我们在组件间传递这些状态变得困难。
在这种情况下，使用 Vuex 可以使我们更轻松地检索和更新这些状态。我们可以将数组存储在 Vuex 状态对象的一个属性中，并在组件中通过 getters 和 mutations 来使用和修改这个数组。
假设我们有一个顶层组件 App 和一个 ShoppingCart 组件。我们想在 ShoppingCart 组件中存储用户已选购的项目列表，并希望能够在 App 组件中获取该列表。
我们可以首先在 Vuex 状态对象中创建一个名为 shoppingCart 的属性，它将存储用户已选购的项目列表。然后，我们可以编写一个 getter 方法来从该属性中检索列表。
-- -------------------- ---- -------
-- - ---- ------- ------------ ---
----- ----- - --- ------------
------ -
------------- --
--
-------- -
--------------------- ------- -- -
------ -------------------
-
--
---------- -
-- ------ ------------ --- -------- --
-
---在 ShoppingCart 组件中，我们可以使用 Vuex 的 mapGetters 方法来检索 shoppingCart 数组。这将返回一个名为 shoppingCart 的计算属性，它将调用我们在 Vuex 中编写的 getter 方法并返回结果。
-- -------------------- ---- -------
-- ----- ---------- -- ------------ --
------ - ---------- - ---- -------
------ ------- -
--------- -
---------------
----------------------
--
-
-现在，我们可以在 ShoppingCart 组件中使用该数组，并在 App 组件中获得同样的数组。
总结
本文介绍了如何在 Vue.js 中正确使用 Vuex 关联普通数组，并给出了相关示例代码。通过使用 Vuex 状态管理库，我们可以更好地组织和管理应用程序状态，并使组件之间的状态共享变得更加容易。希望此文章能为您提供有深度的指导意义，并对您在前端开发中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64788f89968c7c53b04c6e12