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地址

转载于:https://www.cnblogs.com/herozhou/p/7029348.html

vuex实践之路——笔记本应用（三）相关推荐

领域驱动设计(DDD)实践之路(三)：如何设计聚合
本文首发于 vivo互联网技术微信公众号链接:https://mp.weixin.qq.com/s/oAD25H0UKH4zujxFDRXu9Q 作者:wenbo zhang [领域驱动设计实践 ...
OOAD实践之路——真实案例解析OO理论与实践（二、第一项任务：特性列表）
查看本系列全部文章: <OOA&D实践之路--真实案例解析OO理论与实践>索引贴第一份说明当这个项目开始时,我们得到的关于我们要做的系统的唯一说明是一页Word文档 ...
亿级用户百TB级数据的 AIOps 技术实践之路（增强版）
作者简介周荣,华为消费者BG云运维部 AIOps 负责人,GOPS 2018 深圳站金牌讲师,07年加入华为,先后分别负责下一代智能网.中间件平台.运维工具等产品的研发与规划,在分布式系统.大数据分 ...
猪八戒网CI/CD最佳实践之路
序言本文旨在介绍ZBJ DevOps团队倾力打造的DevOps平台中关于CI/CD流水线部分的实践.历经三次大版本迭代更新的流水线,完美切合ZBJ各种业务发展需求,在满足高频率交付的同时,提高了研发 ...
云效助力新金融DevOps转型——南京银行实践之路
在2018云栖大会南京峰会企业研发云专场,由南京银行研发管理负责人吴攀带来了"云效助力新金融DevOps转型--南京银行实践之路"的主题分享.首先对南京银行的研发规模与成长做了介绍 ...
在碰撞中成长 - 北京银行的DevOps实践之路
2018年10/27日,在上海召开的微软年度最大规模的技术盛会-微软2018技术暨生态大会上,北京银行渠道系统负责人&敏捷团队负责人周兵女士和大家一起分享了北京银行的DevOps 实践转型经验 ...
OceanBase在蚂蚁金服的智能运维实践之路
OB君:蚂蚁金服资深技术专家虞舜将在本文为大家分享蚂蚁金服数据库所面对的业务挑战,解读OceanBase的自治数据库体系,解密OceanBase在天猫双11大促期间的稳定性解决方案,探索OceanBa ...
产品迭代发布如何更快速？阿里持续集成与持续交付实践之路全解析
2017年5月9日,云效平台资深研发工程师向禹通过直播分享了<持续集成与持续交付实践之路>.他从云效背景.云效方案.云效价值三个方面进行了分享.他主要分享了持续集成持续交付的解决方案和案例 ...
传统研发团队的敏捷转型实践之路
在行业数字化转型加速的今天,精益敏捷.DevOps等已成为软件研发团队经常提起的热点词汇.对于软件研发而言,效率.质量是永恒的主题,提升软件研发效能的关键是要提升持续交付能力,而要构建持续交付能力,走 ...

vuex实践之路——笔记本应用（三）

Actions

vuex实践之路——笔记本应用（三）相关推荐

最新文章

热门文章