Actions

Action 类似于 mutation,不同在于:

  • Action 提交的是 mutation,而不是直接变更状态。
  • Action 可以包含任意异步操作。

让我们来注册一个简单的 action,实践中,我们会经常会用到 ES2015 的 参数解构 来简化代码(特别是我们需要调用 commit 很多次的时候):

actions: {
increment ({ commit }) {
commit('increment')
}
}

看下我们项目中的actions:

怎么在组件中分发事件呢?

看下我们的Toolbar.vue代码

首先引入mapActions 辅助函数将组件的 methods 映射为 store.dispatch ,

映射 addNote() 为 this.$store.dispatch('addNote'),对应actions中的addNote。

使用actions的优点不只在于简化代码,更重要的在于我们可以在 action 内部执行异步操作。

mutation 有必须同步执行这个限制。Action 就不受约束:

actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}

这是mutation无法做到的。

至此我们的整个应用已经完成。

附上完整项目github地址

vuex实践之路——笔记本应用(三)的更多相关文章

  1. vuex实践之路——笔记本应用(二)

    上一篇我们简单介绍了vuex在此项目中的作用. 这次来理一下项目的整体思路. main.js上次看过了,首先看App.vue文件 我们引入了Toolbar.vue,NodeList.vue,Edito ...

  2. vuex实践之路——笔记本应用(一)

    首先使用vue-cli把环境搭建好. 介绍一下应用的界面. App.vue根组件,就是整个应用的最外层 Toolbar.vue:最左边红色的区域,包括三个按钮,添加.收藏.删除. NoteList.v ...

  3. 《程序设计语言——实践之路(英文第三版)》【PDF】下载

    <程序设计语言--实践之路(英文第三版)>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382234 内容简介 <程序设计语 ...

  4. 《程序设计语言——实践之路【PDF】下载

    <程序设计语言--实践之路[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382240 内容简介 <程序设计语言--实践之路(第3版 ...

  5. webp图片实践之路

    最近,我们在项目中实践了webp图片,并且抽离出了工具模块,整合到了项目的基础模板中.传闻IOS10也将要支持webp,那么使用webp带来的性能提升将更加明显.估计在不久的将来,webp会成为标配. ...

  6. WebP 图片实践之路

    我们会从三部分来聊聊webp这个话题. 什么是webp,它有什么用? 使用webp的常规方法以及优劣. 我们是如何用上webp的. PS:如果是对webp有一定了解的朋友,建议直接看第三部分.因为是讲 ...

  7. webp图片实践之路(转载)

    最近,我们在项目中实践了webp图片,并且抽离出了工具模块,整合到了项目的基础模板中.传闻IOS10也将要支持webp,那么使用webp带来的性能提升将更加明显.估计在不久的将来,webp会成为标配. ...

  8. 知乎技术分享:从单机到2000万QPS并发的Redis高性能缓存实践之路

    本文来自知乎官方技术团队的“知乎技术专栏”,感谢原作者陈鹏的无私分享. 1.引言 知乎存储平台团队基于开源Redis 组件打造的知乎 Redis 平台,经过不断的研发迭代,目前已经形成了一整套完整自动 ...

  9. 从 Spring Cloud 开始,聊聊微服务架构实践之路

    [编者的话]随着公司业务量的飞速发展,平台面临的挑战已经远远大于业务,需求量不断增加,技术人员数量增加,面临的复杂度也大大增加.在这个背景下,平台的技术架构也完成了从传统的单体应用到微服务化的演进. ...

随机推荐

  1. jboss4.2.3 屏蔽响应头server信息

    1.修改配置deploy/jboss-web.deployer/service.xml <Connector port="8080" protocol="HTTP/ ...

  2. sysbench 多线程异步io模拟mysql测试的脚本

    用于测试的脚本: for size in 100 do cd /mnt/stec sysbench --test=fileio --file-num=1 --file-total-size=${siz ...

  3. Oracle 单实例 Relink Binary Options 说明

    一.引入问题 帮朋友在CentOS上安装一个10g的Oracle,结果朋友的CentOS版本是6.2的版本,最新的一个版本,不过Linux上基本都差不多,所以按照以前的步骤,迅速的操作起来,结果遇到N ...

  4. Sql Server2008R2下载地址

    ed2k://%7Cfile%7Ccn_sql_server_2008_r2_enterprise_x86_x64_ia64_dvd_522233.iso%7C4662884352%7C1DB0252 ...

  5. MySQL运维之---mysqldump备份、select...into outfile、mysql -e 等工具的使用

    1.mysqldump备份一个数据库 mysqldump命令备份一个数据库的基本语法: mysqldump -u user -p pwd dbname > Backup.sql 我们来讲解一下备 ...

  6. 很不错的关于依赖注入和AOP的系列文章

    http://blog.csdn.net/tittop/article/details/6716033

  7. MySql详解(一)

    MySql详解(一) 作为一名Java开发人员,数据库的地位不用多说了.从大学时期的SqlServer,到现在最流行的MySql和Oracle.前者随着阿里巴巴的去IOE化,在互联网公司中的使用比例是 ...

  8. java几个easy出错的小程序

    把基本知识过了一遍,发现了几个自己easy 出错的小程序,记录下来.. .. 1.关于try-catch异常 2,JAVA中的自省机制 3.有继承关系的类中静态函数 1,关于try-catch异常 p ...

  9. unlimited 控制

  10. MyBatis实战之初步

    关于MyBatis与Hibernate及其JDBC的比较,大家可以参考我的这篇文章:MyBatis+Hibernate+JDBC对比分析 如果觉得这个还不够系统全面,可以自行Google或者百度. 用 ...