为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 真正掌握vuex的使用方法（三）

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

标签：
Vue.js vuex

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

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

  <div id="app">
      <div><h2>总票数：{{nodeVoteCount+vueVoteCount}}</h2></div>
      <div>
          <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/node.png">
          <h3>如何通过node.js对数据进行MD5加密</h3>
          <!--为该按钮增加一个事件，让nodeVoteCount的状态加1-->
          <input type="button" value="投票" @click="$store.state.nodeVoteCount++">票数:{{nodeVoteCount}}
      </div>
      <hr/>
      <div>
          <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/vuex.png">
          <h3>真正掌握vuex的使用方法（一）</h3>
          <!--为该按钮增加一个事件，让vueVoteCount的状态加1-->
          <input type="button" value="投票" @click="$store.state.vueVoteCount++">票数：{{vueVoteCount}}
      </div>
  </div>

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

  <div id="app">
      <div><h2>总票数：{{nodeVoteCount+vueVoteCount}}</h2></div>
      <div>
          <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/node.png">
          <h3>如何通过node.js对数据进行MD5加密</h3>
          <input type="button" value="投票" @click="nodeVoteCount++">票数:{{nodeVoteCount}}
      </div>
      <hr/>
      <div>
          <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/vuex.png">
          <h3>真正掌握vuex的使用方法（一）</h3>
          <input type="button" value="投票" @click="vueVoteCount++">票数：{{vueVoteCount}}
      </div>
  </div>

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

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

上面那个错误告诉我们，在使用了vuex的情况下，在页面中不能直接更改状态值。在这个时候咱们就需要用到vuex当中的 mutation了。
#####咱们知道vue的视图都是由数据驱动的，也就是说状态(state)里面的数据是动态变化的，而要改变状态内数据的唯一的方法就是通过mutation!也就是说mutation内可以存放一些改变状态的逻辑方法！这也是Vuex设计的一个特点，处理数据的逻辑和视图进行分离！
接下来咱们要修改一下store.js当中的代码了，将其修改为：

import Vue from 'vue';//引用vue
import Vuex from 'vuex';//引用vuex
Vue.use(Vuex);//使用vuex
const 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';//引用vue
import Vuex from 'vuex';//引用vuex
Vue.use(Vuex);//使用vuex
const 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：

  <div id="app">
      <div><h2>总票数：{{nodeVoteCount+vueVoteCount}}</h2></div>
      <div>
          <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/node.png">
          <h3>如何通过node.js对数据进行MD5加密</h3>
          <!--通过store.commit来调用mutations的addNodeVote方法-->
          <input type="button" value="投票" @click="$store.commit('ADDNODEVOTE')">票数:{{nodeVoteCount}}
      </div>
      <hr/>
      <div>
          <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/vuex.png">
          <h3>真正掌握vuex的使用方法（一）</h3>
          <!--通过store.commit来调用mutations的addVueVoteCount方法-->
          <input type="button" value="投票" @click="$store.commit('ADDVUEVOTE')">票数：{{vueVoteCount}}
      </div>
  </div>

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

    <div id="app">
        <div><h2>总票数：{{nodeVoteCount+vueVoteCount}}</h2></div>
        <div>
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/node.png">
            <h3>如何通过node.js对数据进行MD5加密</h3>
            <!--通过store.commit来调用mutations的addNodeVote方法-->
            <input type="button" value="投票" @click="$store.commit('ADDNODEVOTE')">
            <!--commit方法的第二个参数即为要传入的值-->
            <input type="button" value="加2" @click="$store.commit('ADDNODEVOTE',2)">票数:{{nodeVoteCount}}
        </div>
        <hr/>
        <div>
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/vuex.png">
            <h3>真正掌握vuex的使用方法（一）</h3>
            <!--通过store.commit来调用mutations的addVueVoteCount方法-->
            <input type="button" value="投票" @click="$store.commit('ADDVUEVOTE')">
            <!--commit方法的第二个参数即为要传入的值-->
            <input type="button" value="加2" @click="$store.commit('ADDVUEVOTE',2)">票数：{{vueVoteCount}}
        </div>
    </div>

然后再对store.js进行下调整：

import Vue from 'vue';//引用vue
import Vuex from 'vuex';//引用vuex
Vue.use(Vuex);//使用vuex
const 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：

<template>
    <div id="app">
        <div><h2>总票数：{{nodeVoteCount+vueVoteCount}}</h2></div>
        <div>
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/node.png">
            <h3>如何通过node.js对数据进行MD5加密</h3>
            <!--直接调用ADDNODEVOTE-->
            <input type="button" value="投票" @click="ADDNODEVOTE()">
            <!--直接调用ADDNODEVOTE-->
            <input type="button" value="加2" @click="ADDNODEVOTE(2)">票数:{{nodeVoteCount}}
        </div>
        <hr/>
        <div>
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/vuex.png">
            <h3>真正掌握vuex的使用方法（一）</h3>
            <!--直接调用ADDVUEVOTE-->
            <input type="button" value="投票" @click="ADDVUEVOTE()">
            <!--直接调用ADDVUEVOTE-->
            <input type="button" value="加2" @click="ADDVUEVOTE(2)">票数：{{vueVoteCount}}
        </div>
    </div>
</template>

<script>
    import {mapState,mapMutations} from "vuex";
    export default {
        name: 'App',
        methods:{
            ...mapMutations(["ADDNODEVOTE","ADDVUEVOTE"]),
            ...{
                //写自己定义的方法
            }
        },
        computed:{
            ...mapState(["nodeVoteCount","vueVoteCount"]),
            ...{
                //自己的属性可以在这里面写哦
            }
        }
    }
</script>
注意：mutations里的操作必须是同步的。那好奇的小伙伴一定在想，如果我写一些异步的操作，会如何呢？哈哈，也不会发生什么让人惊讶的事情！只不过官方推荐不要在mutation方法内写异步操作！

未完，待续！

点击查看更多内容
发表于 2019.05.11 23:10， 共 3766 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
7人点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

张培跃

全栈工程师
手记
篇
粉丝
30
获赞与收藏
98

关注作者，订阅最新文章

阅读免费教程

感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消