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. 关于SLG的产品市场判断

    SLG游戏是我自己主攻的未来产品方向,以下几个板块是我自己想着力挖掘的用户艺术: 1)经营能力(包括资源的规划,调配,成长性预期,以及投产比如何向用户选择向最大化) 2)统筹能力(包括自我资源的有效整 ...

  2. ucli tcl cmd

    ucli接口与tcl 8.6兼容:vcs中要调用ucli接口,执行脚本,必须在compile的时候,加入debug的权限: -debug,-debug_pp,-debug_all,-debug_acc ...

  3. AD域与外部网站域名相同处理办法

    环境 域控:Windows Server 2008 r2 AD域:example.cn 问题:DNS可以正常解析外部域名(如www.baidu.com),但是无法解析mail.example.cn 原 ...

  4. HTTP请求中POST与GET的区别

      本文章已收录于:   一.原理区别 一般我们在浏览器输入一个网址访问网站都是GET请求;再FORM表单中,可以通过设置Method指定提交方式为GET或者POST提交方式,默认为GET提交方式. ...

  5. 利用ueditor保存到mysql数据库时出现乱码

    首先反复检查页面的字符编码,发现使用的都是 utf-8,再次检查数据库编码格式也用的是UTF-8.用format函数进行格式化,还是不起作用,最用把出现乱码的字段的数据类型由BLOB改成MEDIUMT ...

  6. Django-debug-toolbar的使用

    Django项目的开发过程中,离不开各种调试,那么,我们今天介绍一个工具,django debug toolbar,该工具为我们提供了更加丰富的调试信息,如提供session信息,SQL查询信息等等. ...

  7. Linux 查看磁盘读写速度IO使用情况

    # 查看io进程 命令:iotop 注:DISK TEAD:n=磁盘读/每秒              DISK WRITE:n=磁盘写/每秒. 注:标黄的可查看磁盘的读写速率,下面可以看到使用的io ...

  8. oracle insert、append、parallel、随后查询的redo与磁盘读写

    SQL> set autotrace traceonly statistics; SQL> insert into big_table_dir_test1 select * from bi ...

  9. 使用Angular2的Http发送AJAX请求

    使用Angular2的Http发送AJAX请求 Angular的文档并不详细,甚至API文档也有一些错误.经过查阅资料并经大量实验,终于明确了Angular的Http发送Ajax请求的方式方法.本文描 ...

  10. [c/c++] programming之路(17)、高级指针

    一.二级指针 二级指针的作用:1.函数改变外部变量指针2.外挂改变一个指针的值 #include<stdio.h> #include<stdlib.h> void main() ...