除了state之外,有时我们还需要从state中筛选出符合条件的一些数据,这些数据是依赖state的,此时会用到getters
getters就类似于属性中的计算属性
这个getter只有获取,如果需要设置修改,还是需要经过mutations
getters里的数据也是响应式的
例如,state中定义了list,为1-10的数组,
state: {list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
组件中,需要显示所有大于5的数据,正常的方式,是需要list在组件中进行再一步的处理,但是getters可以帮助我们实现它
1.定义getters
getters: {// 要求:// getters函数的第一个参数是 state// 必须要有返回值filterList: state => state.list.filter(item => item > 5)}
2.使用getters
2.1原始方式-$store
<div>{{ $store.getters.filterList }}</div>
2.2辅助函数 - mapGetters
computed: {// mapState 和 mapGetters都是映射属性,所以应该往computed里写...mapGetters(['filterList'])
}
<div>{{ filterList }}</div>
使用小结