Vuex 里面提供了一些帮手方法，比如 mapState，mapGetters ，它们可以帮助我们更方便的在组件里面定义需要的 computed 属性 .. 或者一些 methods 方法 ..

在这个 Counter 组件里，我们再去添加两个 computed 属性 .. 添加一个 total .. 它 return 的是 this.$store.getters.total ，返回的就是 total 这个 getter .. 在组件的模板里用一下这个属性 .. 先添加一条分隔线 .. div.ui.divider .. 共 {{ total }} 个项目 .

再添加一个 sum 属性 .. 它返回的是 this.$store.getters.sum ， 然后在组件里再用一下 sum 这个属性 .. 合计 {{ sum }} 。

这个 count 属性可以换个名字 .. 它返回的是 average 这个 getter，所以它的名字也可以是 average .. 在组件里再绑定输出这个 average ..

回到浏览器 .. 再测试一下 .. 页面上会输出 count 里的项目的个数，合计的值 .. 还有平均值 ..

mapGetters

组件里用的这些 computed 属性返回的都是一些 getters ... 下面我们用 mapGetters 这个帮手方法去改造一下定义这些属性的方法 ..

先添加一个 mapGetters ，让它等于 Vuex 下面的 mapGetters ..

然后去掉 Counter 组件里的 computed 这些属性 .. 用一下对象的 Spread 操作符 .. 就是三个点 .. spread 的是 mapGetters 方法返回的东西 .. 给它一个数组 .. 里面可以说明一下要使用的 getters .. sum, total, 还有 average ..

这里你也可以给 mapGetters 一个对象 .. 然后你可以重新命名 getters .. 比如 countSum .. 对应的 getter 是 store 里的 sum .. 这样在组件里，你可以绑定输出这个 countSum .. 它返回的东西其实就是 store 里的 sum 这个 getter 返回的东西 ..

这里我暂时不需要重命名这些 getter ，所以可以使用数组的形式 ..

回到浏览器 .. 再试一下 ..