Vuex简单使用学习二（Getter）

最新推荐文章于 2025-03-21 08:15:00 发布

前端恶霸

最新推荐文章于 2025-03-21 08:15:00 发布

阅读量362

点赞数 1

分类专栏： vue 文章标签： Vuex

本文链接：https://blog.csdn.net/weixin_41916005/article/details/86979968

版权

vue 专栏收录该内容

16 篇文章

订阅专栏

假如Vuex定义某个数组llist

const store=new Vuex.Store({
	state:{
		list:[0,2,15,30,50]
	},
	mutations:{
	},
	getters:{
			filteredList(state){
				return state.list.filter(item=>item<10)
			},
                        listCount(state,getters){
                                return getters.filteredList.length
                       }
		}
	
})

如果想获得小于10的数据通常方法

this.$state.state.list.filter(item=>item<10)

这样的话也可以解决但是多个组件调用同个方法就需要复制多遍，修改时候也需要修改多遍

在getters定义方法 state 作为其第一个参数

其他组件调用this.$store.getters.filteredList

也可以把getter作为第二个参数计算过滤后的结果