介绍
小编给大家分享一下Vuex中映射的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
Vuex是一把双刃剑。如果使用得当,使用Vue可以使你的工作更加轻松。如果不小心,它也会使你的代码混乱不堪。
使用Vuex之前,你应该先了解四个主要概念:状态,getter,突变和行动。一个简单的Vuex状态在商店中的这些概念中操作数据。Vuex中的映射提供了一种从中检索数据的好方法。
在文中,我将演示如何映射Vuex存储中的数据。如果你熟悉Vuex基础,那么这些内容将会帮你编写更简洁,更便于维护的代码。
本文假设你了解Vue。js和Vuex的基础知识。
Vuex中的映射是什么?
Vuex中的映射使你可以将状态中的任何一种属性(getter,突变和行动)绑定到组件中的计算属性,并直接使用状态中的数据。
下面是一个简单的Vuex商店例子,其中测试数据位于状态中。
import Vue 得到& # 39;vue # 39;
import Vuex 得到& # 39;vuex& # 39;
Vue.use (Vuex)
const store =, new Vuex.Store ({
,,状态:{
,,,数据:,“test data"
,,}
}) 如果要从国家中访问<代码> 的数据值,则可以在Vue。js组件中执行以下操作。
计算:,{
,,,,,,,getData () {
,,,,,,,,return 这。store.state.data美元
,,,,,,,}
,,,} 上面的代码可以工作,但是随着状态数据量的开始增长,很快就会变得很难看。
例如:
import Vue 得到& # 39;vue # 39;
import Vuex 得到& # 39;vuex& # 39;
Vue.use (Vuex)
const store =, new Vuex.Store ({
,,状态:{
用户:,,,,{
,,,,,,,,,
,,,,,,,年龄:23岁
,,,,,,,角色:用户
,,,,,,,数据:{
,,,,,,,,,的名字:“user name"
,,,,,,,,,地址:“user address"
,,,,,,,}
,,,},
,,,服务:,{},
,,,medical_requests:, {},
,,,任命:,{},
,,,}
,,}
}) 要从处于国家中的用户对象获取用户名:
计算:,{
,,,,,,,getUserName () {
,,,,,,,,return 这。store.state.user.data.name美元
,,,,,,,}
,,,} 这样可以完成工作,但是还有更好的方法。
映射状态
要将国家映射到Vue。js组件中的计算属性,可以运行以下命令。
import {, mapGetters },得到& # 39;vuex& # 39;;
export 默认{
,,,:计算,{
,,,,,,,…mapState ([
,,,,,,,,,,,& # 39;用户# 39;
,,,,,,,)
,,,}
} 现在你可以访问组件中的整个用户对象。
你还可以做更多的事,例如把对象从国家添加到<代码> mapState 方法。
import {, mapGetters },得到& # 39;vuex& # 39;;
export 默认{
,,,:计算,{
,,,,,,,…mapState ([
,,,,,,,,,,,& # 39;用户# 39;
,,,,,,,,,,,& # 39;服务# 39;
,,,,,,,)
,,,}
} 如你所见,这要干净得多。可以通过以下方式轻松访问用户名:
{{user.data.name}} 对<代码>服务象和映射的许多其他的值也是如此。
你注意到我们是如何将数组传递给<代码> mapState() 的吗?如果需要为值指定其他名称,则可以传入一个对象。
import {, mapGetters },得到& # 39;vuex& # 39;;
export 默认{
,,,:计算,{
,,,,,,,…mapState ({
,,,,,,,,,,,userDetails: & # 39;用户# 39;
,,,,,,,,,,,userservice: & # 39;服务# 39;
,,,,,,,})
,,,}
} 现在可以通过简单地调用<代码> userDetails> 用户。
何时映射整个国家
根据经验,仅当状态中有大量数据,并且组件中全部需要它们时,才应该映射。
在上面的例子中,如果我们只需要一个值(例如<代码>用户名>
在映射时,整个对象将会全部加载到内存中。实际上我们并不想继续把不需要的数据加载到内存中,因为这将是多余的,并且从长远来看会影响性能。
映射getter
映射getter的语法与<代码> mapState 函数相似。
