Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

Chase620
• 阅读 1977

1、mapState和mapGetters的作用

  mapState用于将state中的数据映射到组件的计算属性中,而mapGetters用于将getter中的计算属性映射到组件的计算属性中,之前获取Vuex数据都是通过$store找到state对象,再去state中去拿数据,操作getter,mutation,以及action都会是如此的不方便,因此,Vuex提供了一些辅助函数帮助快速的拿到数据。

2、mapState的使用

   主要是获取数据的辅助函数,为了解决需要获取多个状态且不再那么重复以及冗余的问题,mapState会帮助我们自动生成计算属性。

类型一:组件计算属性名和Vuex中的状态名不一致

    比如组件中需要获取Vuex中count数据的内容,但是在组件中有可能也有一个同名的count数据,因此在获取Vuex中的count时,组件的计算属性就不能为count了,因此这时计算属性名和Vuex的状态名不能一致。

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

index.js

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

Vuex.vue

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

执行结果

    计算属性的函数第一个参数为Vuex中的状态state,因此可以通过state直接获取数据,计算属性值为函数,如果只是获取Vuex中数据并映射到组件计算属性上,可以使用简写,如果计算属性需要组件自己的数据进行逻辑操作,写完整的函数

1、完整的写法:

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

Vuex.vue

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

运行结果

2、简写:

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

代码(简写1)

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

代码(简写2)

类型二:Vuex状态名和计算属性的名称一致

如果Vuex的state的状态名和映射的计算属性名完全一样,那么mapState可以直接传字符串数组来映射数据

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

代码

3、组件自己的计算属性处理

  如上所示,计算属性是已经被mapState占满,那么也就是说组件的所有计算属性都是从store映射过来的,如果组件它本身也有计算属性呢,那么就需要采用解构的方式去做,简而言之:将mapState对象返回到一个大的新对象中去。

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

代码

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

执行结果

4、mapGetters的使用

  mapGetters是Vuex提供的将store中的getter映射到组件计算属性中的辅助函数,mapGetters使用方式和mapState一样,最常见的方式就是解构的方式。

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

代码

如果组件自身与Vuex中的状态名不能一致时,需要按照之前的写法写

Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters

代码

本文转自 https://www.jianshu.com/p/eef5213c14c4,如有侵权,请联系删除。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
2年前
Java日期时间API系列31
  时间戳是指格林威治时间1970年01月01日00时00分00秒起至现在的总毫秒数,是所有时间的基础,其他时间可以通过时间戳转换得到。Java中本来已经有相关获取时间戳的方法,Java8后增加新的类Instant等专用于处理时间戳问题。 1获取时间戳的方法和性能对比1.1获取时间戳方法Java8以前
Stella981 Stella981
2年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Stella981 Stella981
2年前
Python之time模块的时间戳、时间字符串格式化与转换
Python处理时间和时间戳的内置模块就有time,和datetime两个,本文先说time模块。关于时间戳的几个概念时间戳,根据1970年1月1日00:00:00开始按秒计算的偏移量。时间元组(struct_time),包含9个元素。 time.struct_time(tm_y
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这