当前位置 : 首页/建站知识/网站制作/Vuex如何映射?(详解指南)

Vuex如何映射?(详解指南)

发布时间:2021年9月13日 13:56 作者:誉新源

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)

相关文章