谈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