mapState与mapGetters语法糖
大家好，又见面了，我是你们的朋友全栈君。
vuex中的 mapState，mapGetters 属于辅助函数，其实就是vuex的一个语法糖，使代码更简洁更优雅。
import {
mapState, mapGetters } from "vuex"
export default {
computed: {
//原先state中的数据
templateInfo(){
return this.$store.state.templateInfo
},
//现在
...mapState([
"templateInfo",
]),
//原先getters中的数据
isPreview(){
return this.$store.getters.isPreview
},
//现在
...mapGetters([
'isPreview'
])
},
created(){
//使用时
this.templateInfo,
this.isPreview
}
}mapState与mapGetters只能在computed中使用，与正常的computed中的函数一起使用时需要用扩展运算符，然后在mapState或mapGetters函数的数组中放入对应的state或getters中的名称。
1.若要使用某个模块中的state，则第一个参数是模块名称
...mapState("moduleA", {
test1: state => state.test1,
test2: "test2"
}),2.若要使用多个模块中的state，以上方法有点太累赘，则用以下方法
...mapState({
currentType: state => state.app.currentType,
userId: state => state.user.userId,
}),以上两种方法对getters同样有效。
3.通过state中的值再动态计算出getters中的值
const getters = {
alarmName: state => {
return (row) => state.app.alarmTypes.find(item => item.alarmType == row.alarmType)
},
},发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/145174.html原文链接：https://javaforall.cn
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年5月1，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
