vuex中...mapstate和...mapgetters的区别及说明
作者:番茄炒蛋多加米饭 发布时间:2023-07-02 16:33:53
...mapstate和...mapgetters的区别
…mapstate
当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。
computed: mapState([
// 映射 this.count 为 store.state.count
'count'
])
官方文档如上
因为state相当于data,getters相当于计算属性,个人理解如果只需要拿到state中一个值,就没必要在getters中作为计算属性出现。
…mapGetters
辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
如果你想将一个 getter 属性另取一个名字,使用对象形式:
...mapGetters({
// 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
doneCount: 'doneTodosCount'
})
官方文档如上
相当于计算属性,等于把vuex中的计算属性映射到了当前组件中
vuex mapState mapGetters用法及多个module下用法
在vuex,当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余,例如
computed: {
count() {
return this.$store.state.count
},
name() {
return this.$store.state.name
},
age() {
return this.$store.getter.age
},
userInfo() {
return this.$store.getter.userInfo
}
}
为了解决这个问题,我们可以使用 mapState和mapGetters 辅助函数帮助我们生成计算属性,让你少按几次键
一、mapState
1、对象写法
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
export default {
computed: mapState({
// 传函数参数
count: state => state.count, // 箭头函数可使代码更简练 映射为this.count
userCount: state => state => state.user.count, // 模块化写法 箭头函数可使代码更简练 映射为this.userCount
// 传字符串参数
userName: 'name', // name等同于state => state.name,不支持模块化写法 映射为this.userName
// 需要使用this局部状态,使用常规函数写法
age(state) { // 映射为this.age
return state.age + this.age // 可与局部状态组合
}
})
}
2、字符串数组写法
除此之外,还有更简洁的写法
当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组,类似于对象的key和value键名相同时{ name: name } =》{ name }
computed: mapState([
'count', // 映射 this.count 为 store.state.count
'name' // 映射 this.name为 store.state.name
])
此外如果是用到了module模块化,除了将对象作为参数传递之外,namespaced mapState还可以使用两个参数:namespace和表示模块成员的对象名称数组,像这样
computed: mapState('user', ['count', 'name']) // user 模块名称
3、使用展开运算符
mapState 函数返回的是一个对象,这样就造成无法与当前局部组件计算属性混合使用
以前我们需要使用一个工具函数将多个对象合并为一个,以使我们可以将最终对象传给 computed 属性。
自从有了展开运算符后,可以极大地简化写法
computed: {
...mapState([
'count', // 映射 this.count 为 store.state.count
'name' // 映射 this.name为 store.state.name
]),
// 局部组件计算属性
localComputed () {},
}
二、mapGetters
mapGetters辅助函数写法相同
computed: {
...mapGetters([
'count', // 映射 this.count 为 store.getters.count
'name' // 映射 this.name为 store.getters.name
]),
// 局部组件计算属性
localComputed () {},
}
模块化写法
...mapGetters('user', ['count', 'name']) // user 模块名称
三、mapActions、mapMutations
mapActions、mapMutations用法相同,他们的作用都是把actions、mutations里的方法映射到局部组件调用
例如:
以前的调用actions:
this.$store.dispatch("test", "value")
this.$store.dispatch("user/test", "value") // user模块化, 第二个参数为传参
使用辅助函数后调用
...mapActions([
"test",
])
this.test('value')
总结以上,推荐使用展开运算符+字符串数组传参的方式使用,可以极大简化代码,更优雅,不冗余
这些仅为个人经验,希望能给大家一个参考,也希望大家多多支持。
来源:https://blog.csdn.net/m18697787579/article/details/123218840
猜你喜欢
- 输出电脑上所有的串口名:import serialimport serial.tools.list_portsfrom easygui im
- 前言常见的通知方式有:邮件,电话,短信,微信。短信和电话:通常是收费的,较少使用;邮件:适合带文件类型的通知,较正式,存档使用;微信:适合告
- 本文实例讲述了MySQL无法存储emoji表情解决方案。分享给大家供大家参考,具体如下:今天学习爬虫爬伯乐在线的文章,由于在文章中有emoj
- 回想下,在 Python 中编程时,你是否曾经需要检查某个可迭代对象(如列表)中的任何元素或所有元素的计算结果是否为True?假设,我们要判
- 简述1.pythonpython作为一门解释型脚本语言,它有三种发布方式:文件 : 源码文件,运行需要使用者安装Python环境并且安装依赖
- python 版本 3.x首先安装 PIL由于PIL仅支持到Python 2.7,加上年久失修,于是一群志愿者在PIL的基础上创建了兼容的版
- 配置 thriftpython使用的包 thrift个人使用的python 编译器是pycharm community edition. 在
- amend翻译成中文:修改1.修改还未push的提交//修改最近一次提交git commit --amend//进入注释页面,进行修改//修
- 这世上“没有丑女人,只有懒女人”这是女人美丽圣经里的最精彩的一句话了,一个女人只要舍得花时间琢磨怎么保养,怎么打扮,总能够找到方法展现自己美
- 一个写给别人的小代码顺便也贴上来这是一个滑动展示用的小容器通过鼠标移动和离开触发滑动效果<!DOCTYPE html PUBLIC &
- 1.HTTP请求格式: <request line> <headers> <blank line> [&
- 最近一直在用Vs2013调试编译opencv,意外发现一个超级赞的图片查看的插件, 超级方便易用的一个插件,直接以图片形式可视化了openc
- 想要asp能连接mysql数据库需要安装MySQL ODBC 3.51 驱动 http://www.jb51.net/softs/19910
- 一、前言该测试功能是Linux产测软件的一个子功能,主要涉及:140行代码PySide2的Event、信号和槽、QLabel,QWidget
- 前言SQL Server创建表是最常见也是最常用的操作之一,下面就为您介绍SQL Server创建表的语句写法,供您参考,希望可以让您对SQ
- 一、VS2008工程设置工作 首先,建立一个windows应用程序的工程,将C/C++->预处理器->预处理器定义下的_WIND
- 标准库Python拥有一个强大的标准库。Python语言的核心只包含数字、字符串、列表、字典、文件等常见类型和函数,而由Python标准库提
- 一、问题实现对文本的分句,大致来说主要是以中文的句号、感叹、问号等符号进行分句。难点在于直接分句可能会造成人物说话的语句也被分开!二、步骤分
- 由于需要从某个网页上下载一些PDF文件,但是需要下载的PDF文件有几百个,所以不可能用人工点击来下载。正好Python有相关的模块,所以写了
- 1,定义和注册中间件在注册的中间件中使用:from django.http import HttpResponseRedirect'