真正掌握vuex的使用方法（三）

接下来咱们继续使用vuex来完成上篇文章的投票实例。大家一定要记住，学习编程这种事一定要慢慢来才会快！所以一定要将代码多敲几遍哦！

目前当前的票数已经可以在页面中渲染出来了！接下来要做的事就是让按钮起到应有的责任：点击对应的按钮让数字加1, 总票数也要加1。很简单，只要给按钮增加一个事件，直接改变其状态即可，代码如下：

  
      总票数：{{nodeVoteCount+vueVoteCount}}
      
          
          如何通过node.js对数据进行MD5加密
          
          票数:{{nodeVoteCount}}      
      

      
          
          真正掌握vuex的使用方法（一）
          
          票数：{{vueVoteCount}}      
  

现在有的人可能会有一个疑问，改变值为什么不用简化的形式去写呢？好吧，咱们试一把：

  
      总票数：{{nodeVoteCount+vueVoteCount}}
      
          
          如何通过node.js对数据进行MD5加密
          票数:{{nodeVoteCount}}      
      

      
          
          真正掌握vuex的使用方法（一）
          票数：{{vueVoteCount}}      
  

你会惊讶地发现，点击投票按钮不仅起不到任何的效果，居然还报错飘红了。怎么办？先看一下报错的信息：

//nodeVoteCount没有在计算属性中设置setter
 Computed property "nodeVoteCount" was assigned to but it has no setter.

上面那个错误告诉我们，在使用了vuex的情况下，在页面中不能直接更改状态值。在这个时候咱们就需要用到vuex当中的 mutation了。

接下来咱们要修改一下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
    addNodeVote(state){//这里的state即是上面定义的state常量
        state.nodeVoteCount++;       //根据具体情况，你还可以在这里写一些其它的逻辑来改变状态
    },    //为vueVoteCount加1
    addVueVote(state){//这里的state即是上面定义的state常量
        state.vueVoteCount++;        //根据具体情况，你还可以在这里写一些其它的逻辑来改变状态
    }
}export default new Vuex.Store({//暴露Store对象
    state,
    mutations//将mutations进行暴露})

Vuex 建议我们mutation需要用大写常量来表示，目的是与action（后面会讲到）进行区分！所以我们需要将代码修改一下下：

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
    ADDNODEVOTE(state){//这里的state即是上面定义的state常量
        state.nodeVoteCount++;
    },    //为vueVoteCount加1
    ADDVUEVOTE(state){//这里的state即是上面定义的state常量
        state.vueVoteCount++;
    }
}export default new Vuex.Store({//暴露Store对象
    state,
    mutations//将mutations进行暴露})

到目前为止已经将mutation方法配置好了，那么接下来要做的事就是让按钮来触发mutation即可。触发的时候需要用到store.commit方法，修改App.vue：

  
      总票数：{{nodeVoteCount+vueVoteCount}}
      
          
          如何通过node.js对数据进行MD5加密
          
          票数:{{nodeVoteCount}}      
      

      
          
          真正掌握vuex的使用方法（一）
          
          票数：{{vueVoteCount}}      
  

你会发现点击按钮的效果达到了你的预期，一切都在朝着好的方向发展！那这个mutation方法可以接收值吗？当然可以！咱们现在在原来的基础之上再给加一个按钮，点击该按钮让票数加2，修改App.vue:

    
        总票数：{{nodeVoteCount+vueVoteCount}}
        
            
            如何通过node.js对数据进行MD5加密
            
            
            
            票数:{{nodeVoteCount}}        
        

        
            
            真正掌握vuex的使用方法（一）
            
            
            
            票数：{{vueVoteCount}}        
    

然后再对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;;
    }
}export default new Vuex.Store({//暴露Store对象
    state,
    mutations//将mutations进行暴露})

到此再cnpm run dev。现在的你可以想加1加1，想加2加2了！是不是很爽？
做到目前这一步，肯定有人在想：在view调用mutation方法的时候有没有简写的方式？有！不过这个要写到methods里，最终App.vue：

未完，待续！

作者：张培跃
链接：https://www.jianshu.com/p/afab6524816f