前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vuex之action

Vuex之action

作者头像
wade
发布2020-04-24 17:27:17
6250
发布2020-04-24 17:27:17
举报
文章被收录于专栏:coding个人笔记coding个人笔记

一般开发使用mutation已经足够,不过官网推荐mutation不要有异步操作,那么为了规范,我们应该把异步操作的方法都放在vuex提供的action里面。

Action 提交的是 mutation,而不是直接变更状态。

Action 可以包含任意异步操作。

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。

Action里面:

export default { scoreAction(store){ store.commit('scoreChange', 15); }}

mutation通过commit调用,action通过dispatch 调用:

this.$store.dispatch('scoreAction');

讲真的,这跟直接调用mutation真的没什么区别,这样看起来反而多此一举,但是使用action最大的好处就是,所有涉及异步操作的都在action中完成,然后通过触发mutation,这样的话所有的状态变更都追踪的到。

Action也支持载荷的格式及传参,跟mutation差不多就不再写了。

辅助函数也差不多:

引入:import { mapActions } from 'vuex'

注入:

...mapActions ([ 'scoreAction',]),...mapActions ({ add: 'scoreAction'})

调用:

this.scoreAction();this.add();

至于组合action这就跟调用promise没什么太大区别,看场景灵活使用。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-12-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档