Vuex 映射完全指南

Vuex 是一把双刃剑。如果使用得当，Vue 可以使你的工作更加轻松。如果不小心，也会使让的代码混乱不堪。

在使用 Vuex 之前，应该先了解四个主要概念：state、getter、mutation 和 action。一个简单的 Vuex 状态在 store 中的这些概念中操作数据。Vuex 中的映射提供了一种从中检索数据的好方法。

在文中，我将演示如何映射 Vuex 存储中的数据。如果你熟悉 Vuex 基础，那么这些内容将会帮你编写更简洁、更便于维护的代码。

本文假设你了解 Vue.js 和 Vuex 的基础知识。

Vuex 中的映射是什么？

Vuex 中的映射使你可以将 state 中的任何一种属性（state、getter、mutation 和 action）绑定到组件中的计算属性，并直接使用 state 中的数据。

下面是一个简单的 Vuex store 例子，其中测试数据位于 state 中。

如果要从 state 中访问 的值，则可以在 Vue.js 组件中执行以下操作。

上面的代码可以工作，但是随着 state 数据量的开始增长，很快就会变得很难看。例如：

要从处于 state 中的用户对象获取用户名：

这样可以完成工作，但是还有更好的方法。

映射 state

要将 state 映射到 Vue.js 组件中的计算属性，可以运行以下命令。

现在你可以访问组件中的整个用户对象。

你还可以做更多的事，例如把对象从 state 添加到 方法。

如你所见，这要干净得多。可以通过以下方式轻松访问用户名：

对象和映射的许多其他的值也是如此。

你注意到我们是如何将数组传递给 的吗？如果需要为值指定其他名称，则可以传入一个对象。

现在可以通过简单地调用 来引用 。

何时映射整个 state

根据经验，仅当 state 中有大量数据，并且组件中全部需要它们时，才应该映射。

在上面的例子中，如果我们只需要一个值（例如 ），则映射整个用户对象就没有多大意义。

在映射时，整个对象将会全部加载到内存中。实际上我们并不想继续把不需要的数据加载到内存中，因为这将是多余的，并且从长远来看会影响性能。

映射 getter

映射 getter 的语法与 函数相似。

与映射 state 类似，如果你打算使用其他名称，则可以把对象传递给 函数。

映射 mutation

映射 Mutation 时，可以在用以下语法来提交 Mutation。

例如：

映射 action

映射 action 与映射 mutation 非常相似，因为它也可以在方法中完成。使用映射器会把 绑定到映射器数组中的名称或对象的键。

总结

看到这里，你应该能够学到：

对 Vuex 中的映射是如何工作的以及为什么要使用它有了深刻的了解

能够映射 Vuex store 中的所有组件（state、 getter、 mutation、action）

知道什么时候应该映射 store