您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

Vuex 映射完全指南

时间:2020-09-10 10:15:01  来源:  作者:
Vuex 映射完全指南

 

作者:前端先锋

转发链接:https://mp.weixin.qq.com/s/1sl21P0AHPlbFEq4_Q7hVQ

前言

Vuex 是一把双刃剑。如果使用得当,Vue 可以使你的工作更加轻松。如果不小心,也会使让的代码混乱不堪。

在使用 Vuex 之前,应该先了解四个主要概念:state、getter、mutation 和 action。一个简单的 Vuex 状态在 store 中的这些概念中操作数据。Vuex 中的映射提供了一种从中检索数据的好方法。

在文中,我将演示如何映射 Vuex 存储中的数据。如果你熟悉 Vuex 基础,那么这些内容将会帮你编写更简洁、更便于维护的代码。

本文假设你了解 Vue.js 和 Vuex 的基础知识。

Vuex 中的映射是什么?

Vuex 中的映射使你可以将 state 中的任何一种属性(state、getter、mutation 和 action)绑定到组件中的计算属性,并直接使用 state 中的数据。

下面是一个简单的 Vuex store 例子,其中测试数据位于 state 中。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)const store = new Vuex.Store({
  state: {
    data: "test data"
  }})

如果要从 state 中访问 data 的值,则可以在 Vue.js 组件中执行以下操作。

computed: {
        getData(){          return this.$store.state.data
        }    }

上面的代码可以工作,但是随着 state 数据量的开始增长,很快就会变得很难看。例如:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)const store = new Vuex.Store({
  state: {
    user: {
        id:1,
        age:23,
        role:user
        data:{          name:"user name",
          address:"user address"
        }    },    services: {},
    medical_requests: {},
    Appointments: {},
    }  }})

要从处于 state 中的用户对象获取用户名:

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

这样可以完成工作,但是还有更好的方法。

映射 state

要将 state 映射到 Vue.js 组件中的计算属性,可以运行以下命令。

import { mapGetters } from 'vuex';
export default{
    computed: {        ...mapState([            'user',
        ])    }}

现在你可以访问组件中的整个用户对象。

你还可以做更多的事,例如把对象从 state 添加到 mapState 方法。

import { mapGetters } from 'vuex';
export default{
    computed: {        ...mapState([            'user',
            'services'
        ])    }}

如你所见,这要干净得多。可以通过以下方式轻松访问用户名:

{{user.data.name}}

services 对象和映射的许多其他的值也是如此。

你注意到我们是如何将数组传递给 mapState() 的吗?如果需要为值指定其他名称,则可以传入一个对象。

import { mapGetters } from 'vuex';
export default{
    computed: {        ...mapState({            userDetails:'user',
            userServices:'services'
        })    }}

现在可以通过简单地调用 userDetails 来引用 user。

何时映射整个 state

根据经验,仅当 state 中有大量数据,并且组件中全部需要它们时,才应该映射。

在上面的例子中,如果我们只需要一个值(例如 username),则映射整个用户对象就没有多大意义。

在映射时,整个对象将会全部加载到内存中。实际上我们并不想继续把不需要的数据加载到内存中,因为这将是多余的,并且从长远来看会影响性能。

映射 getter

映射 getter 的语法与 mapState 函数相似。

import { mapGetters } from 'vuex'
export default {
  computed: {    ...mapGetters([      'firstCount',
      'anotherGetter',
    ])  }}

与映射 state 类似,如果你打算使用其他名称,则可以把对象传递给 mapGetters 函数。

import { mapGetters } from 'vuex'
export default {
  computed: {    ...mapGetters([      first:'firstCount',
      another:'anotherGetter',
    ])  }}

映射 mutation

映射 Mutation 时,可以采用以下语法来提交 Mutation。

this.$store.commit('mutationName`)

例如:

import { mapMutations } from 'vuex'
export default {
  methods: {    ...mapMutations([      'search', // 映射 `this.increment()` 到 `this.$store.commit('search')`
      // `mapMutations` 也支持 payloads:
      'searchBy' // 映射 `this.incrementBy(amount)` 到 `this.$store.commit('searchBy', amount)`
    ]),    ...mapMutations({      find: 'search' // 映射 `this.add()` 到 `this.$store.commit('search')`
    })  }}

映射 action

映射 action 与映射 mutation 非常相似,因为它也可以在方法中完成。使用映射器会把 this.$store.dispatch('actionName') 绑定到映射器数组中的名称或对象的键。

import { mapActions } from 'vuex'
export default {
  // ...
  methods: {    ...mapActions([      'increment', // 映射 `this.increment()` 到 `this.$store.dispatch('increment')`
      // `mapActions` 也支持 payloads:
      'incrementBy' // 映射 `this.incrementBy(amount)` 到 `this.$store.dispatch('incrementBy', amount)`
    ]),    ...mapActions({      add: 'increment' // 映射 `this.add()` 到 `this.$store.dispatch('increment')`
    })  }}

总结

看到这里,你应该能够学到:

  • 对 Vuex 中的映射是如何工作的以及为什么要使用它有了深刻的了解
  • 能够映射 Vuex store 中的所有组件(state、 getter、 mutation、action)
  • 知道什么时候应该映射 store

作者:前端先锋

转发链接:https://mp.weixin.qq.com/s/1sl21P0AHPlbFEq4_Q7hVQ



Tags:Vuex 映射   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
作者:前端先锋转发链接:https://mp.weixin.qq.com/s/1sl21P0AHPlbFEq4_Q7hVQ前言Vuex 是一把双刃剑。如果使用得当,Vue 可以使你的工作更加轻松。如果不小心,也会使让的代码混...【详细内容】
2020-09-10  Tags: Vuex 映射  点击:(110)  评论:(0)  加入收藏
▌简易百科推荐
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(1)  评论:(0)  加入收藏
程序是如何被执行的  程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(9)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(19)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(23)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(24)  评论:(0)  加入收藏
一个项目的大部分API,测试用例在参数和参数值等信息会有很多相似的地方。我们可以复制API,复制用例来快速生成,然后做细微调整既可以满足我们的测试需求1.复制API:在菜单发布单...【详细内容】
2021-12-14  AutoMeter    Tags:AutoMeter   点击:(20)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条