前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >谈vuex的…mapGetters

谈vuex的…mapGetters

作者头像
全栈程序员站长
发布2022-06-30 20:36:55
2490
发布2022-06-30 20:36:55
举报

大家好,又见面了,我是你们的朋友全栈君。

谈vuex的…mapGetters

代码语言:javascript
复制
computed:{
    ...mapGetters(['test']),
}

我们在vue文件中就可以直接this.test来访问vuex中的属性了。但是…mapGetters是什么?

mapGetters前用了扩展运算符”…”

代码语言:javascript
复制
function fn(){
	return {a: 1, b: 2};
}//如mapGetters
var a = {
	...fn(),
	c: 3,
	d: 4
}   //如computed
console.log(a); //{a: 1, b: 2, c: 3, d: 4}

a是一个对象,fn是一个方法、返回一个对象,使用扩展运算符完美融入a对象。这解释了为什么使用扩展运算符。

再看看mapGetters这个函数的大概。

代码语言:javascript
复制
const getters = {
	a: () => 1,
	b: () => 2
};//假如他是vuex的getter
function fn(keys){
	var data = {};
	keys.forEach(key => {
		if(getters.hasOwnProperty(key)){
			data[key] = getters[key];
		}
	});
	return data;
}//假如他是mapGetters

fn(['a','b','c']);
//得到 a: 1, b: 2, c: undefined

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/131941.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 谈vuex的…mapGetters
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档