什么是getters:
如果你对面向对象的变成思想理解的还可以，那么就不难理解getters。把这个概念放到实际的应用场景中，可能会好理解很多。
如果store中的数据是这样的：
store.js
在某个组建中导入了a.vue，b.vue和c.vue这三个子组建，在这三个子组建中都要使用arr这个数据，但是这三个子组建只需要arr这个数组中的类型为number的数据。
我们首先想到的解决方案是这样的：在三个子组建中先将arr取出来，然后再将取出来的数据进行处理。
子组建中的代码
三个子组建中对于arr的数据需求都相同，那么就要在三个子组建中都去写一个overArr函数，也造成了代码的重复和冗余，基于此，vuex提供了getters，getters中可以声明属性和函数，可以在这些属性和函数中对state中的数据做一些处理。这些函数可以在子组建中被调用。那么上面代码中的overArr这个函数，就可以直接封装在store中，在a.vue，b.vue和c.vue中调用这个函数就可以了。
在store中添加getters:
（1）getters中可以添加属性。
store.js
在子组建中调用
子组建中的代码
（2）getters中添加函数。
getters
在子组建中调用这个函数
子组建的computed
store.js中的函数可以传参数。
如果现在的需求是这样的，在a.vue中要使用arr过滤的number，在b.vue中使用arr过滤的string，在c.vue中使用arr过滤的布尔，这三种需求代码相似，就没有必要在getters中封装三个函数，只需要在getters中封装一个函数，然后在子组建调用这个函数时将需要的数据类型以参数的形式传进去，就能获取相应的结果。
所以上面的代码可以进行升级：
getters
子组建中访问getters中的方法：
子组建中的computed
这样就减少了数据过滤的代码冗余。
mapGetters:
mapGetters其实和mapState一样，提供了一种便捷的访问getters中属性的方式
store.js中存在若干个不同作用的属性，在子组建中要同时访问这两个属性，就可以用mapGetter。
store.js中的数据
子组建中的调用：
子组建
上面的这几种方式，根据自己的项目需求挑选使用便ok了。
你所羡慕的一切，都是有备而来。
网友评论