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. input file 上传 判断文件类型、路径是否为空

    <html> <body bgcolor="white"> <TABLE cellSpacing=0 cellPadding=0 width=&quo ...

  2. tensorflow神奇问题

    运行tensorflow程序时,遇到了各种奇葩的问题,比如: 1.Import Error: DLL load failed: The specified module could not be fo ...

  3. Divide the Sequence (贪心)

    题意:求将一串数据尽可能多分成所有前缀和大于0的连续子串. 思路:由于是要求所有前缀和大于0,那么只要从后往前推就好了. #include<bits/stdc++.h> using nam ...

  4. python str find & index 联系

    [1]相同点 (1)功能:检测字符串中是否包含子字符串str (2)语法: [1] str.find(str, beg = 0, end = len(string)) [2] str.index(st ...

  5. CSS——对position定位和margin-top的理解

    一.常见定位方式 1.positon:absolute (脱离文档流) 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位 (这里的父元素是指定位方式为relative和abso ...

  6. python的变量和简单的数据类型

    决定学习python这门语言了,本人资质愚钝,只会把学到的东西记录下来,供自己查漏补缺,也可以分享给和我一样正在学习python语言的人,若在记录中存在什么错误,希望多多批评指正,谢谢. Python ...

  7. linux(centos)测试带宽

    1.安装speedtest-cli speedtest-cli是一个用Python编写的轻量级Linux命令行工具,在Python2.4至3.4版本下均可运行.它基于Speedtest.net的基础架 ...

  8. Linux 修改SWAP分区后导致开机问题

    Linux 系统出现提示原因 扩容后,修改了SWAP,或者安装了双 Linux 系统,在安装后一种 Linux 系统时把 SWAP分区 重新格式化,导致UUID 改变,所以启动时无法加载原来对应UUI ...

  9. DDD 之 Multiple Canonical Models

    MultipleCanonicalModels Scratch any large enterprise and you'll usually find some kind of group focu ...

  10. dockerfile 介绍

    Docker简介 Docker项目提供了构建在Linux内核功能之上,协同在一起的的高级工具.其目标是帮助开发和运维人员更容易地跨系统跨主机交付应用程序和他们的依赖.Docker通过Docker容器, ...