接下来看一下template当中计算总票数的表达式：

     
      
总票数：{
   {nodeVoteCount+vueVoteCount}}
     

是不是很长？是不是看着它很蓝瘦？ 

正常的第一反应就是将其写入到计算属性内，方便调用！所以咱们可以将computed调整如下：

computed:{    ...mapState(["nodeVoteCount","vueVoteCount"]),    ...{        sumCount(){
    //计算属性，求两个票数之和             return this.nodeVoteCount+this.vueVoteCount;        }    }}

然后再将template的总票数表达式修改为：

     
      
总票数：{
   {sumCount}}
     

是不是有种整个世界都很清静的感脚？哈，还没完，继续！ 

在咱们的vuex当中，有一个和vue中的computed类似，都是用来计算state然后生成新的状态（数据）的，请记住它的名字叫做——getters。 

打开store.js为其添加一常量getters:

//getters为vuex当中的计算属性const getters={    //求总票数之和    sumCount(state){
   //state即是存储状态的对象        return state.nodeVoteCount+state.vueVoteCount    }}

然后将这个常量放入到Store当中，最终的store.js为：

import Vue from 'vue';//引用vueimport Vuex from 'vuex';//引用vuexVue.use(Vuex);//使用vuexconst state={    nodeVoteCount:1,//node的初始票数    vueVoteCount:2,//vue的初始票数};//生明一个常量mutations，将所有的mutation放入其中const mutations={    //为nodeVoteCount加1,voteNum为增加的值，默认加1    ADDNODEVOTE(state,voteNum=1){
   //这里的state即是上面定义的state常量        state.nodeVoteCount+=voteNum;    },    //为vueVoteCount加1,voteNum为增加的值，默认加1    ADDVUEVOTE(state,voteNum=1){
   //这里的state即是上面定义的state常量        state.vueVoteCount+=voteNum;;    }}//getters为vuex当中的计算属性const getters={    sumCount(state){
    //state即是存储状态的对象        return state.nodeVoteCount+state.vueVoteCount    }}export default new Vuex.Store({
   //暴露Store对象    state,    mutations,//将mutations进行暴露    getters//将getters常量放入到Store当中})

最后一步，在App.vue当中通过$store.getters调用一下sumCount即可，调用方法：

     
      
总票数：{
   {$store.getters.sumCount}}
     

当然，调用getter也有简写的形式，比如我要将上面代码改写成：

     
      
总票数：{
   {sumCount}}
     

那么就需要在计算属性内进行一些设置 

首先在引入vuex时，添加mapGetters：

import {mapState,mapMutations,mapGetters} from "vuex";

然后将mapGetters添加到computed中:

computed:{    ...mapState(["nodeVoteCount","vueVoteCount"]),    ...mapGetters(["sumCount"]),//需要的getter为sumCount}

修改后的完整App.vue: