谈vuex的…mapGetters

全栈程序员站长

发布于 2022-06-30 20:36:55

2500

发布于 2022-06-30 20:36:55

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

谈vuex的…mapGetters

computed:{
    ...mapGetters(['test']),
}

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

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

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这个函数的大概。

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 删除

https