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 中。

import Vue from 'vue' import Vuex from 'vuex'  Vue.use(Vuex)  const store = new Vuex.Store({   state: {     data: "test data"   } })

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

computed: {         getData(){           return this.$store.state.data         }     }

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

例如：

import Vue from 'vue' import Vuex from 'vuex'  Vue.use(Vuex)  const store = new Vuex.Store({   state: {     user: {         id:1,         age:23,         role:user         data:{           name:"user name",           address:"user address"         }     },     services: {},     medical_requests: {},     appointments: {},     }   } })

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

computed: {         getUserName(){           return this.$store.state.user.data.name         }     }

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

映射 state

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

import { mapGetters } from 'vuex';  export default{     computed: {         ...mapState([             'user',         ])     } }

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

你还可以做