先改造一下这个应用 .. 把 count 的值换成一个数组 .. 然后 mutations 里的 add ，可以用一下 state.count.push 方法，把 payload 的值 push 到 count 这个数组里 ..

在 Counter 组件里面绑定输出了 count 这个 computed 属性 .. 现在 state 里的 count 是一个数组了 .. 这里我想返回把 count 数组里的数字相加之后的结果 .. this.$store.state.count，用一下 reduce 方法 .. 两个参数，a 还有 b ，返回 a + b .. 初始数据是 0 ..

到浏览器上试一下 .. commit 一下 add 这个修改 .. commit 的时候带个 payload .. 这里应该就是一个数字 .. 再 commit 一下 .. 换个不同的值 .. 页面上红色标签里显示的数字就是 store 的 state 下面的 count 这个数组里面的数字相加之后的结果 ..

Getters

如果在别的组件里面，同样需要这个合计 count 数据之后的这个结果 .. 我们要重复这个操作，这里就是用 reduce 方法去合计 count 里的项目的值 .. 如果你需要基于 store 里的 state 去计算出各种不同类型的值 .. 我们可以把它们定义成 getters ..

这里我们就可以把这个合计 count 项目值的方法定义成一个 getter .. 在 Vuex 的 Store 里面，添加一个 getters .. 里面定义一个 sum .. getter 方法接收两个参数，一个是 state， 第二个参数是 getters .. 这里我只需要用到 state .. return 的就是用 reduce 计算出来的 count 里的合计值 .. state.count.reduce((a, b) => a + b, 0)

在组件里面， 我们可以使用一下 this.$store.getters 访问到所有的 getter .. 用一下上面定义的 sum ..

再到浏览器上试一下 .. commit 一些 add 修改 ... 页面上输出的就是 count 里的所有项目的合计之后的结果 ..

total

下面我们再去添加两个 getter .. 先添加一个 total .. 接受 state 参数 .. 它可以返回 count 这个数据的个数 .. state.count.length ..

average
再添加一个 average .. 这个 getter 可以返回 count 里面的数据的平均数 .. 接收两个参数 .. state，还有 getters .. return 的是用 getters 的 sum 除以 getters.total .. 也就是用 count 里的数据的合计值，除以数据的个数，结果就是平均数 ..

这个平均数可能有很多小数 .. 我只想保留一位小数 .. 可以这样 .. 让这个结果先乘以 100 ，再让它除以 100 .. 然后用个括号 .. 再用一下 toFixed .. 小数的位置是 1 ..

这个结果会变成一个字符串 .. 在前在我们再用一个 + 号 .. 让它变成数字 ..

在下面的组件里，再绑定输出这个平均值 .. 用一下 this.$store.getters.average ..

回到浏览器 .. commit 一些 add 修改 .. 现在页面上红色标签里显示的就是 count 这个数据的平均值 ..