vuex实践之路——笔记本应用(三)
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实践之路——笔记本应用(三)的更多相关文章
- vuex实践之路——笔记本应用(二)
上一篇我们简单介绍了vuex在此项目中的作用. 这次来理一下项目的整体思路. main.js上次看过了,首先看App.vue文件 我们引入了Toolbar.vue,NodeList.vue,Edito ...
- vuex实践之路——笔记本应用(一)
首先使用vue-cli把环境搭建好. 介绍一下应用的界面. App.vue根组件,就是整个应用的最外层 Toolbar.vue:最左边红色的区域,包括三个按钮,添加.收藏.删除. NoteList.v ...
- 《程序设计语言——实践之路(英文第三版)》【PDF】下载
<程序设计语言--实践之路(英文第三版)>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382234 内容简介 <程序设计语 ...
- 《程序设计语言——实践之路【PDF】下载
<程序设计语言--实践之路[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382240 内容简介 <程序设计语言--实践之路(第3版 ...
- webp图片实践之路
最近,我们在项目中实践了webp图片,并且抽离出了工具模块,整合到了项目的基础模板中.传闻IOS10也将要支持webp,那么使用webp带来的性能提升将更加明显.估计在不久的将来,webp会成为标配. ...
- WebP 图片实践之路
我们会从三部分来聊聊webp这个话题. 什么是webp,它有什么用? 使用webp的常规方法以及优劣. 我们是如何用上webp的. PS:如果是对webp有一定了解的朋友,建议直接看第三部分.因为是讲 ...
- webp图片实践之路(转载)
最近,我们在项目中实践了webp图片,并且抽离出了工具模块,整合到了项目的基础模板中.传闻IOS10也将要支持webp,那么使用webp带来的性能提升将更加明显.估计在不久的将来,webp会成为标配. ...
- 知乎技术分享:从单机到2000万QPS并发的Redis高性能缓存实践之路
本文来自知乎官方技术团队的“知乎技术专栏”,感谢原作者陈鹏的无私分享. 1.引言 知乎存储平台团队基于开源Redis 组件打造的知乎 Redis 平台,经过不断的研发迭代,目前已经形成了一整套完整自动 ...
- 从 Spring Cloud 开始,聊聊微服务架构实践之路
[编者的话]随着公司业务量的飞速发展,平台面临的挑战已经远远大于业务,需求量不断增加,技术人员数量增加,面临的复杂度也大大增加.在这个背景下,平台的技术架构也完成了从传统的单体应用到微服务化的演进. ...
随机推荐
- jboss4.2.3 屏蔽响应头server信息
1.修改配置deploy/jboss-web.deployer/service.xml <Connector port="8080" protocol="HTTP/ ...
- sysbench 多线程异步io模拟mysql测试的脚本
用于测试的脚本: for size in 100 do cd /mnt/stec sysbench --test=fileio --file-num=1 --file-total-size=${siz ...
- Oracle 单实例 Relink Binary Options 说明
一.引入问题 帮朋友在CentOS上安装一个10g的Oracle,结果朋友的CentOS版本是6.2的版本,最新的一个版本,不过Linux上基本都差不多,所以按照以前的步骤,迅速的操作起来,结果遇到N ...
- Sql Server2008R2下载地址
ed2k://%7Cfile%7Ccn_sql_server_2008_r2_enterprise_x86_x64_ia64_dvd_522233.iso%7C4662884352%7C1DB0252 ...
- MySQL运维之---mysqldump备份、select...into outfile、mysql -e 等工具的使用
1.mysqldump备份一个数据库 mysqldump命令备份一个数据库的基本语法: mysqldump -u user -p pwd dbname > Backup.sql 我们来讲解一下备 ...
- 很不错的关于依赖注入和AOP的系列文章
http://blog.csdn.net/tittop/article/details/6716033
- MySql详解(一)
MySql详解(一) 作为一名Java开发人员,数据库的地位不用多说了.从大学时期的SqlServer,到现在最流行的MySql和Oracle.前者随着阿里巴巴的去IOE化,在互联网公司中的使用比例是 ...
- java几个easy出错的小程序
把基本知识过了一遍,发现了几个自己easy 出错的小程序,记录下来.. .. 1.关于try-catch异常 2,JAVA中的自省机制 3.有继承关系的类中静态函数 1,关于try-catch异常 p ...
- unlimited 控制
- MyBatis实战之初步
关于MyBatis与Hibernate及其JDBC的比较,大家可以参考我的这篇文章:MyBatis+Hibernate+JDBC对比分析 如果觉得这个还不够系统全面,可以自行Google或者百度. 用 ...