Vuex是把双刃剑。正确使用Vue可以让你的工作更容易些。同样,如果不小心,也会造成代码的混乱。
您应该了解四个主要概念,然后才能使用Vuex:状态、getter、mutation和action。Vuex的简单状态在这些概念的store中操纵数据。在Vuex中映射提供了一个很好的检索数据的方式。
本文将演示如何从Vuex存储中映射数据。如果您熟悉Vuex的基本原理,这些将帮助您编写更简洁、更易于维护的代码。
这篇文章假定您对Vue.js和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}}
这能完成任务,但还有更好的办法。
为了在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就可以引用它。
按照经验,只有在state中有大量数据,并且组件中需要这些数据时,才应该进行映射。
对于上述示例,如果我们只需要一个值(比如username),那么映射整个用户对象就没有什么意义了。
当映射时,整个对象都被加载到内存中。事实上,我们并不希望继续将不需要的数据加载到内存中,因为这样做将是多余的,并且从长期来看会影响性能。
导入{mapGetters}from'vuex'exportdefault{computed:{...mapGetters('anotherGetter',]}}
类似于mapGetters函数,如果您打算使用其他名称,您可以将对象传递给mapGetters函数。
导入{mapGetters}from'vuex'exportdefault{computed:{...mapGetters([first:'firstCount',another:'anotherGetter',]}}}}
当映射一个Mutation时,使用下面的语法来提交Mutation。
this.$store.commit('mutationName`)
比如:
import{mapMutations}from'vuex'exportdefault{methods:{...mapMutations('search',//映射`this.increment()`this.$store.commit('search')`//`mapMutations`还支持payloads:'searchBy'('search')}}}}
总结
看到这里,你应该可以学到:
深入了解Vuex中的映射是如何工作的,以及为什么要使用它。
可以映射Vuexstore中的所有组件(state,getter,mutation,action)
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。