Vue全家桶学习—Vuex核心的5个概念之Getters

一、Vuex的5个核心概念

（1）、State
（2）、Getters
（3）、Mutations
（4）、Actions
（5）、Modules
前面一篇博客大致了解了以下state和mutations两个属性。
今天主要学习一下Getters属性。

二、Getters

不禁会让人想到java中的getter。事实上，二者还是有区别的，官方对于getters的解释是：Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
那么getters的功能就是将state中的值处理以后再返回结果。

获取store中的state的值，例如：

this.$store.state.goodList

但是现在我现在想要获取购物车中价格小于200元的商品数量，那么没有使用getters前，应该是：

this.$store.state.goodList.filter(good => good.price<200).length

但是我如果在很多地方都需要用到这个功能，那么就需要不断复制这段函数，那么我们就可以将个函数放入getters中，当需要获取购物车中价格小于200元的商品数量 时，直接调用getters中的方法即可，这样同样有利于日后代码的维护和修改。在store文件夹的index.js下添加getters属性，前面创建项目时，默认只创建了state、mutations、actions和modules属性，并没有自带getters属性。给getters添加lowPrice的属性：

当我们需要获取购物车中价格小于200元的商品数量时，只需要：
this.$store.getters.lowPrice

Getter 也可以接受其他 getter 作为第二个参数，也就是说可以在一个getter中调用其他getter，例如，现在我想要找到购物车中商品价格大于等于200并且小于400的商品个数：小于400元的商品减去小于200元的商品数量

结果：

控制台输出：