【Vuex】4、Vuex-getters的使用详情
1、Getters基本使用
- 有时候,我们需要从store中获取一些state变异后的状态,比如下面的Store中:
- 获取学年龄大于20的个数
![](https://img2022.cnblogs.com/blog/1319446/202207/1319446-20220705142926337-1994283749.png)
- 我们可以在Store中定义getters
![](https://img2022.cnblogs.com/blog/1319446/202207/1319446-20220705142927042-1921754096.png)
2、Getters作为参数和传递参数
- 如果我们已经有了一个获取所有年龄大于20岁学生列表的getters,那么代码可以这样来写:
![](https://img2022.cnblogs.com/blog/1319446/202207/1319446-20220705142927577-2053489944.png)
- getters默认是不能传递参数的,如果希望传递参数,那么只能让getters本身返回一个函数
- 比如我们想接收自定义的学生的年龄
![](https://img2022.cnblogs.com/blog/1319446/202207/1319446-20220705142928168-381012388.png)
总结:
getters下面定义的方法,支持两个参数,一个是state,这个state是指上面的state,另外一个参数是getters,我们可以通过state获取单一数据源里面定义的变量,可以通过getters获取里面定义的方法
getters默认不接受参数传递,如果需要接收参数,则需要如下这么使用;
[有点类似computed计算属性]
例如:
getters: {
moreAgeStu(state){
return age => { # age便是传递过来的参数
return stage.students.filter(s => s.age > age)
}
}
}
# 我们看前端的写法
![](https://img2022.cnblogs.com/blog/1319446/202207/1319446-20220705142928715-1726055174.png)
本文来自博客园,作者:郭祺迦,转载请注明原文链接:https://www.cnblogs.com/guojie-guojie/p/16446334.html