专栏首页张培跃真正掌握vuex的使用方法(三)

真正掌握vuex的使用方法(三)

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

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

  <div id="app">
      <div><h2>总票数:{{nodeVoteCount+vueVoteCount}}</h2></div>
      <div>
          <img src="./assets/node.png">
          <h3>如何通过node.js对数据进行MD5加密</h3>
          <!--为该按钮增加一个事件,让nodeVoteCount的状态加1-->
          <input type="button" value="投票" @click="$store.state.nodeVoteCount++">票数:{{nodeVoteCount}}
      </div>
      <hr/>
      <div>
          <img src="./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 src="./assets/node.png">
          <h3>如何通过node.js对数据进行MD5加密</h3>
          <input type="button" value="投票" @click="nodeVoteCount++">票数:{{nodeVoteCount}}
      </div>
      <hr/>
      <div>
          <img src="./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 src="./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 src="./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 src="./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 src="./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 src="./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 src="./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方法内写异步操作!

未完,待续!

本文分享自微信公众号 - 张培跃(zhangpeiyue8),作者:张培跃

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-05-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 真正掌握vuex的使用方法(二)

    接下来咱们来完成一个超级简单的投票功能!要求很简单,点击“投票”按钮,相应的票数会发生加1的变化,另外总票数为所有票数之和,如图所示:

    用户1272076
  • 真正掌握vuex的使用方法(四)

    是不是很长?是不是看着它很蓝瘦? 正常的第一反应就是将其写入到计算属性内,方便调用!所以咱们可以将computed调整如下:

    用户1272076
  • React之JSX语法

    如果要使用JSX,需要得到语法的支持,你可以使用Babel来进行转换。在该篇文章当中直接引入Babel文件。 将上一篇文章的“你好,世界”拿过来看一下:

    用户1272076
  • 真正掌握vuex的使用方法(二)

    接下来咱们来完成一个超级简单的投票功能!要求很简单,点击“投票”按钮,相应的票数会发生加1的变化,另外总票数为所有票数之和,如图所示:

    用户1272076
  • react-redux源码解读

    react-redux作为胶水一样的东西,似乎没有深入了解的必要,但实际上,作为数据层(redux)与UI层(react)的连接处,其实现细节对整体性能有着决定...

    ayqy贾杰
  • (2019)[前端]面试题[2]:清除浮动的方式

    我们首先得明白什么是浮动:在较早的时候,那时候布局是没有现在的flex之流的。那个时候比较流行的是浮动布局:float。但是用了之后,是可以解决一些布局问题,但...

    无道
  • 自动PC端显示 手机端隐藏CSS代码判断实现

    有些内容部署在PC端但是有不适合在手机端显示(比如盒子过大,遮挡内容)或者手机端显示毫无意义等。我们可以使用下面的代码来实现:电脑端显示,手机端隐藏

    AlexTao
  • 利用吃灰的钓鱼利器做一个手机远程遥控小车

    在FB看了不少关于ESP8266钓鱼测试的文章,这么低成本的玩法,我心动了。在一次买了两个烧录数次Copy过来的代码后就一直吃灰,想必各位也有类似的经历。那么本...

    FB客服
  • IT 行业变化趋势:向云端服务提供商转型

    最近,ServiceNow 公司发起了一个由 1850 位资深管理者参与的行业调查,调查显示云计算在企业中扮演的角色越来越重要。在调查中,超过半数(52%)的受...

    静一
  • Vue实现电商网站项目

    vue-router路由管理/src/views/目录下的vue组件进行设置,router-views挂载所有路由,登录界面与商品列表页面之间header做隐藏...

    Jack Chen

扫码关注云+社区

领取腾讯云代金券