Action 类似于 mutation,不同在于:

  • Action 提交的是 mutation,而不是直接变更状态。
  • Action 可以包含任意异步操作。
const store = new Vuex.Store({
state: {
count:
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
  //接受一个与 store 实例具有相同方法和属性的 context 对象
increment (context) {
context.commit('increment')
}
} //参数解构的简化写法
actions: { increment ({ commit }) { commit('increment') } } //action内部支持异步
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, )
}
}
})

Action 通过 store.dispatch 方法触发

store.dispatch('increment')
// 以载荷形式分发
store.dispatch('incrementAsync', {
amount:
}) // 以对象形式分发
store.dispatch({
type: 'incrementAsync',
amount:
})

在组件中分发action

,使用 this.$store.dispatch('xxx') 分发 action
,使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用 import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')` // `mapActions` 也支持载荷:
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
})
}
}

组合多个 action,以处理更加复杂的异步流程

store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise,并且 store.dispatch 仍旧返回 Promise:

actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, )
})
}
}
store.dispatch('actionA').then(() => {
// ...在组件中使用dispatch
})
actions: {
// ..在另一个action中使用dispatch
actionB ({ dispatch, commit }) {
return dispatch('actionA').then(() => {
commit('someOtherMutation')
})
}
}
//用 async / await
//async直接返回一个promise对象,可以用then和cache来处理。
//sync异步函数遇到await会先返回一个Promise对象,等到异步操作执行完毕,才会根据结果来执行具体的回调函数
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
commit('gotOtherData', await getOtherData())
}
}

vuex-Action(异步)的更多相关文章

  1. 前端技术之:如何在vuex状态管理action异步调用结束后执行UI中的方法

    一.问题的起源 最近在做vue.js项目时,遇到了vuex状态管理action与vue.js方法互相通信.互操作的问题.场景如下图所示: 二.第一种解决方法 例如,我们在页面初始化的时候,需要从服务端 ...

  2. vuex action 与mutations 的区别

    面试没说清楚.这个太丢人回来整理下: 事实上在 vuex 里面 actions 只是一个架构性的概念,并不是必须的,说到底只是一个函数,你在里面想干嘛都可以,只要最后触发 mutation 就行.异步 ...

  3. bingo 跨action异步获取参数

    html(定时器模拟异步) <script> setTimeout(function(){ window.teacInfo = {a:1,b:2}; },2000);</script ...

  4. VUEX action解除页面耦合

    最近项目中需要用到vue+vuex来实现登出跳转功能,老大指派任务要用action解除页面耦合,刚从vue深渊晕晕乎乎爬出来的我是一脸懵逼啊...啥是解除耦合...网上vuex的资料太少了,vuex手 ...

  5. 如何在 vuex action 中获取到 vue 实例

    问题:在做运营开发工具的时候 我想要请求后台服务器保存成功后 弹出一个弹框(饿了吗 的 message 弹框), 由于$message 是挂在 Vue原型链上的方法 (Vue.prototype.$m ...

  6. vue-x action 的相互调用

    实现方式:分发 Action Action 通过 store.dispatch 方法触发: store.dispatch('increment')

  7. vuex——action,mutation,getters的调用

    一.子模块调用根模块的方法 mutation调用  context.commit('clearloginInfo',{key_root:data},{root:true}); action调用  co ...

  8. Vuex入门、同步异步 存取值

    目的: 1.了解vuex中的各个js文件的用途 2.利用vuex存值 3.利用vuex取值 4.Vuex的异步同步加载问题 1. vuex中各个组件之间传值 1.父子组件 父组件-->子组件,通 ...

  9. vuex的state,mutation,getter,action

    开始!正常的简单的拆分下是这样的文件当然module可以在store下面新建一个文件夹用来处理单独模块的vuex管理比较合适. 1.index.js下面 import Vue from 'vue' i ...

  10. vue2.0 axios封装、vuex介绍

    一.前言 博主也是vue道路上的行者,道行不深,希望自己的东西能对大家有所帮助.这篇博客针对 了解过vue基础,但是没有做过vue项目的童鞋.如果想看基础指令,可以看我之前的一篇博客,请点击  跳转, ...

随机推荐

  1. Spark实时案例

    1.概述 最近有同学问道,除了使用 Storm 充当实时计算的模型外,还有木有其他的方式来实现实时计算的业务.了解到,在使用 Storm 时,需要编写基于编程语言的代码.比如,要实现一个流水指标的统计 ...

  2. Django的安装

    ##pip pip是Python的包管理工具,用于快速安装配置所需要的拓展包,能够很好的解决包之间的依赖关系 当前ubuntu 系统上有两个Python环境,使用pip3 是指定Python3的环境 ...

  3. NGUI与特效的层级关系

    通过调整特效的 render queue 来解决特效与NGUI界面之间的层级关系问题,用以下脚本解决: using System.Collections.Generic; using UnityEng ...

  4. win7共享打印机和防火墙配置

    今天给公司一台Win7电脑连接的打印机做共享.办公司共6台电脑,其中1台是连接了打印机,并安装了打印机驱动,可以正常本机使用打印机.现在需要其他5台电脑也共享使用打印机. 1.当共享的时候,提示“无法 ...

  5. PowerShell 语法备忘

    1.挡可能出现 .0 的时候需要加上引号 2.使用 -Join 或者 + 进行字符串拼接 3.在cmd 命令下可以使用 set /a  s=1+2  表示需要进行计算,而不是拼接

  6. 第三篇——Struts2的动态方法调用

    Struts2动态方法调用 默认方式:默认执行方法中的execute方法,若指定类中没有该方法,默认返回success: method方式:执行method属性中定义的方法,没有该方法,页面报错: 通 ...

  7. 复习-css元素定位

    css元素定位 <style type="text/css"> body{ margin: 15px; font-family: "Adobe 宋体 Std ...

  8. Yii1自定义 CGridView 中的操作按钮中 CButtonColumn 选项

    Yii可以使用CButtonColumn自定义按钮及列样式. 效果展示 <?php $this->widget('zii.widgets.grid.CGridView', array( ' ...

  9. Python Mysql 交互

    Mysql 安装Python模块   Linux: yum install MySQL-python Windos: http://files.cnblogs.com/files/wupeiqi/py ...

  10. [C++ Primer Plus] 第6章、分支语句和逻辑运算符(二)课后习题

    一.复习题 3. #include<iostream> using namespace std; void main() { char ch; int c1, c2; c1 = c2 = ...