作者：MosesAnumadu翻译：Crazytechgeek原文：https://blog.logrocket.com/a-...Vuex是一把双刃剑。如果使用得当，使用Vue可以使您的工作变得容易得多。如果您不小心，它还会使您的代码混乱。在使用Vuex之前，您应该了解四个主要概念：state、getter、mutation和action。一个简单的Vuex状态操作商店中这些概念中的数据。Vuex中的地图提供了一种从中检索数据的好方法。在本文中，我将演示如何在Vuex存储中映射数据。如果您熟悉Vuex基础知识，这些将帮助您编写更清晰、更易于维护的代码。本文假定您了解Vue.js和Vuex的基础知识。Vuex中的映射是什么？Vuex中的映射允许您将状态中的任何类型的属性（state、getter、mutation和action）绑定到组件中的计算属性，并直接使用状态中的数据。下面是一个简单的Vuex存储示例，其中包含状态测试数据。importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)conststore=newVuex.Store({state:{data:"testdata"}})如果你想访问state中data的值,然后可以在Vue.js组件中完成以下操作。computed:{getData(){returnthis.$store.state.data}}上面的代码可以工作，但随着状态数据量开始增长，它很快就会变得丑陋。例如：importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)conststore=newVuex.Store({state:{user:{id:1,age:23,role:userdata:{name:"username",address:"useraddress"}},services:{},medical_requests:{},appointments:{},}}})从状态中的用户对象获取用户名：computed:{getUserName(){returnthis.$store.state.user.data.name}}这将完成工作，但还有更好的方法。映射状态要将状态映射到Vue.js组件中的计算属性，您可以运行以下命令。从'vuex'导入{mapGetters}；exportdefault{computed:{...mapState(['user',])}}现在您可以访问组件中的整个用户对象。您可以做更多的事情，例如将对象从状态添加到mapState方法。import{mapGetters}from'vuex';exportdefault{computed:{...mapState(['user','services'])}}如您所见，这更加简洁。可以通过{{user.data.name}}services对象和地图的许多其他值轻松访问用户名。您是否注意到我们是如何将数组传递给mapState()的？如果需要为值指定不同的名称，可以传入一个对象。import{mapGetters}from'vuex';exportdefault{computed:{...mapState({userDetails:'user',userServices:'services'})}}现在可以通过简单地调用userDetails来引用用户。何时映射整个状态根据经验，只有当状态中有大量数据并且组件中需要它们时才应该映射。在上面的示例中，如果我们只需要一个值（例如用户名），那么映射整个用户对象就没有多大意义。映射时，整个对象将被完全加载到内存中。我们实际上不想一直将不需要的数据加载到内存中，因为从长远来看，这将是多余的并且会影响性??能。映射getters映射getters的语法类似于mapState函数。import{mapGetters}from'vuex'exportdefault{computed:{...mapGetters(['firstCount','anotherGetter',])}}类似于映射状态，如果打算使用其他名称，可以通过对象到mapGetters函数。import{mapGetters}from'vuex'exportdefault{computed:{...mapGetters([first:'firstCount',another:'anotherGetter',])}}映射突变当映射一个突变时，你可以使用下面的语法来提交突变。this.$store.commit('mutationName`)例如：import{mapMutations}from'vuex'exportdefault{methods:{...mapMutations(['search',//将`this.increment()`映射到`this.$store.commit('search')`//`mapMutations`也支持负载：'searchBy'//将`this.incrementBy(amount)`映射到`this.$store.commit('searchBy',amount)`]),...mapMutations({find:'search'//将`this.add()`映射到`this.$store.commit('search')`})}}mapactionmapaction非常相似tomapmutation相似之处在于它也可以在一个方法中完成。使用映射器会将this.$store.dispatch('actionName')绑定到映射器数组中对象的名称或键。import{mapActions}from'vuex'exportdefault{//...方法：{...mapActions(['increment',//将`this.increment()`映射到`this.$store.dispatch('increment')`//`mapActions`也支持负载：'incrementBy'//将`this.incrementBy(amount)`映射到`this.$store.dispatch('incrementBy',amount)`]),...mapActions({add:'increment'//将`this.add()`映射到`this.$store.dispatch('increment')`})}}总结看到这里，你应该能学会：MappinginVuexHowit工作原理以及为什么要使用它对能够映射Vuex存储中的所有组件（状态、getter、突变、动作）有深刻的理解知道什么时候应该映射存储
