使用vuex从入门到应用(三)

因为mutation必须是同步函数,但是当我们需要异步的时候怎么办呢?这个时候就有了action,先看一下官网对Action的介绍:

Action 类似于 mutation,不同在于:

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

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

先看效果图:点击加一按钮,数字会延时1秒钟加一,点击减1按钮,延时1秒减一,点击加n按钮,对应的值加随机数


效果图

首先我们需要在store里的js加上如下代码:


action代码块

组件中怎么使用呢?Action 通过 store.dispatch 方法触发:store.dispatch('increment')

或者通过映射:首先先引入mapActions :import { mapActions } from 'vuex',使用如下图:


组件中调用action

所述内容如有错误感谢指正;如遇到问题,欢迎交流。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,972评论 0 7
  • 本文介绍了vue-x的基本用法,案例参考The Net Ninja的youtube视频。如有不足,请多指教。同样学...
    Aleph_Zheng阅读 269评论 0 0
  • 目录 - 1.什么是vuex? - 2.为什么要使用Vuex? - 3.vuex的核心概念?||如何在组件中去使用...
    我跟你蒋阅读 4,132评论 4 51
  • VUE Vue :数据驱动的M V Vm框架 m :model(后台提供数据),v :view(页面),vM(模板...
    wudongyu阅读 5,442评论 0 11
  • ### store 1. Vue 组件中获得 Vuex 状态 ```js //方式一 全局引入单例类 // 创建一...
    芸豆_6a86阅读 744评论 0 3