Vuex如何映射？（详解指南）

Vuex是把双刃剑。正确使用Vue可以让你的工作更容易些。同样，如果不小心，也会造成代码的混乱。

您应该了解四个主要概念，然后才能使用Vuex：状态、getter、mutation和action。Vuex的简单状态在这些概念的store中操纵数据。在Vuex中映射提供了一个很好的检索数据的方式。

本文将演示如何从Vuex存储中映射数据。如果您熟悉Vuex的基本原理，这些将帮助您编写更简洁、更易于维护的代码。

这篇文章假定您对Vue.js和Vuex有基本了解。

一、什么是Vuex映射？

Vuex中的映射允许您将state中的任何属性(state、getter、mutation和action)绑定到组件中的计算属性，并直接使用state中的数据。

以下是一个简单的Vuexstore示例，在state中测试数据。

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:{}:{}:{name:{}:address:{})

要从用户对象状态中获取用户名：

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

这能完成任务，但还有更好的办法。

二、映射state

为了在Vue.js组件中将state映射到calculated属性，您可以运行以下命令。

导入{mapGetters}from'vuex';exportdefault{computed:{...mapState(['user',])}}

您现在可以访问组件中的全部用户对象。

您还可以执行更多操作，例如从state向mapState方法添加对象。

导入{mapGetters}from'vuex';exportdefault{computed:{...mapState('user','services']}}

正如您看到的，这里更加干净。用户名可方便地通过：

{{user.data.name}}

services对象和映射的许多其他值都是这样。

您是否注意到我们是怎样把数组传递给mapState()？若需要为该值指定不同的名称，则可以传递对象。

导入{mapGetters}from'vuex';exportdefault{computed:{...mapState({userDetails:'user',userServices:'services'}}}}}

user现在只需调用userDetails就可以引用它。

1.何时映射整个 state

按照经验，只有在state中有大量数据，并且组件中需要这些数据时，才应该进行映射。

对于上述示例，如果我们只需要一个值(比如username)，那么映射整个用户对象就没有什么意义了。

当映射时，整个对象都被加载到内存中。事实上，我们并不希望继续将不需要的数据加载到内存中，因为这样做将是多余的，并且从长期来看会影响性能。

2.映射 getter

mapState函数的语法类似于getter。

导入{mapGetters}from'vuex'exportdefault{computed:{...mapGetters('anotherGetter',]}}

类似于mapGetters函数，如果您打算使用其他名称，您可以将对象传递给mapGetters函数。

导入{mapGetters}from'vuex'exportdefault{computed:{...mapGetters([first:'firstCount',another:'anotherGetter',]}}}}

3.映射 mutation

当映射一个Mutation时，使用下面的语法来提交Mutation。

this.$store.commit('mutationName`)

比如：

import{mapMutations}from'vuex'exportdefault{methods:{...mapMutations('search',//映射`this.increment()`this.$store.commit('search')`//`mapMutations`还支持payloads:'searchBy'('search')}}}}

4.映射 action

map操作与mapmutation非常类似，因为它也可以在方法中实现。如果使用mapper，可以将this.$store.dispatch('actionName')绑定到mapper阵列中的名称或对象的键。 import{mapActions}from'vuex'exportdefault{//...methods:{...mapActions(['increment',//映射`this.increment')`this.$store.dispatch('increment')`//`mapActions`还支持payloads:'incrementBy'/mapActions({add:'increment','increment'),...mapActions({add:'increment')。

总结

看到这里，你应该可以学到:

深入了解Vuex中的映射是如何工作的，以及为什么要使用它。

可以映射Vuexstore中的所有组件(state,getter,mutation,action)