vuex中的getters

vuex中的getters

vuex中的getters与vue中的computed计算属性十分相似，在vuex中的Store仓库里，state就是用来存放数据，而getters类似于computed计算属性，也可以对数据进行处理，getters可以对store中的数据进行相应的处理，在调用getters时就会返回处理后的结果。

1.语法

//语法一
getters:{
    
    
		vName:function(state){
    
    },   //state传入的是vuex中的state对象
		vName2:function(state，getters){
    
    }  //getters传入的是getters对象
}

//语法二
getters:{
    
    
		vName(state){
    
    },
		vName2(state，getters){
    
    }
}

2.示例

2.1 过滤小于5的数

const store = Vuex.Store({
    
    
	state:{
    
    
		lis:[1,2,3,4,5,6,7,8]
	},
	getters:{
    
    
		filtedList: state = >{
    
    
			return state.lis.filter(lisitem => lisitem > 5)
		}
	}

});

2.2统计lis2的大于5的个数

const store = Vuex.Store({
    
    
	state:{
    
    
		lis:[1,2,3,4,5,6,7,8],
		lis2:[3,4,5,6,7,8,9]
	},
	getters:{
    
    
		filtedLis: state = >{
    
    
			return state.lis.filter(lisitem => lisitem > 5)
		},
		filtedLis2: state = >{
    
    
			return state.lis.filter(lisitem => lisitem > 5)
		},
        //通过getters获取getters中的其他数据
		getlisLength:(state,getters) =>{
    
    
    		return getters.filtedLis2.length
		}
	}

});

2.3过滤小于自定义的数

这里可能有点难懂，我逐步解析：$store.getters.filtedList返回的是一个函数，而函数接受一个num参数，而这个函数过滤掉了state中的lis中小于num的值。

• $store.getters.filtedList 代表的是一个函数function(num)
• $store.getters.filtedList(2) 调用函数function(num)并传入数字2
• state.lis.filter(item => item >= num) 执行函数并过滤掉lis小于2的数据，并返回数组

<!--某组件用到这个$store.getters-->
<template>
	<div>
        <!--传入2，过滤小于2的数-->
        <h1>{
   
   {$store.getters.filtedList(2)}}</h1>
    </div>
</template>


const store = Vuex.Store({
	state:{
		lis:[1,2,3,4,5,6,7,8]
	},
	getters:{
		filtedList(state){
			return function(num){
				return state.lis.filter(item => item >= num)
			}
		}
	}
});