vuex中组合action的使用

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

业务逻辑场景：存在2个action，actionA和actionB，先执行完actionA才能执行actionB。

actions:{actionA({commit}){return new Promise((reslove,reject)=>{commit('someMutationA')reslove()})}
}复制代码

第一种，在组件里派发action

this.$store.dispatch('actionA').then(()=>{// ...派发其他的action或者写其他的逻辑
})复制代码

第二种，在actions里派发另一个action

actions:{actionB({dispatch, commit}){return dispatch('actionA').then(()=>{commit('someOtherMutation')})}
}复制代码

第三种，使用async/await的写法

actions:{async actionA({commit}){commit('someMutationA', await someMutationA())},async actionB({dispatch,commit}){await dispatch('actionA') // 等待actionA完成commit('someMutationB', await someMutationB)}
}复制代码

问题：入职新公司，看他们的项目中使用了大量的复杂action，大概有几百个，但是都没有commit方法，仅仅只是使用这个架构。每一个action处理之前都派发了另一个发送请求和路由拦截的action。看懵了，不知道他们以前为什么这么写。感觉是把API的东西放在了store文件夹下的action里面。

vuex中组合action的使用相关推荐

vue之mapMutaions的使用 vuex中 action 用法示例 api.js的使用
vue之mapMutations的使用我们通过Mutation来改变store中的state,方法往往是在子组件中使用 this.$store.commit(); 来实现,但是这样的缺点是不容易查看 ...
vuex中mutation和action的详细区别
一.vuex中mutation和action的详细区别 const store = new Vuex.Store({state: {count: 0},mutations: {increment (s ...
Vue2.x—理解vuex核心概念action（使用到ES6的变量的解构赋值）
Action Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态. Action 可以包含任意异步操作. 让我们来注册一个简单的 acti ...
Vuex中的核心方法
Vuex中的核心方法 Vuex是一个专为Vue.js应用程序开发的状态管理模式,其采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.每一个Vuex应用的核心就是 ...
vuex结合php,vuex中store的使用介绍（附实例）
本篇文章给大家带来的内容是关于vuex中store的使用介绍(附实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.状态管理(vuex)简介 vuex是专为vue.js应用程序 ...
vuex中store 的mutation
vuex中store 的mutation 1.mutation 官方解释mutation: 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation.Vuex 中的 mutation ...
vue 将数据保存到vuex中
在项目中遇到这样一个问题,就是在登入的时候同时需要从后台获取到左边的导航,但是如果使用h5的localStorage来保存导航信息,会出现app加载进去之后localStorage才保存进浏览器,在m ...
关于vuex中actions可以返回promise的用法
在vuex中的actions中 addCartList({ state, commit }, payload) {return new Promise((reslove, reject) => ...
vuex中actions配合mutation处理axios请求
众所周知,vuex中actions一般用来做异步操作,像数据请求,定时器,都不应该直接写在mutation,像我就犯了这个错 Vuex mutations: {PLAY(state, obj) {co ...

vuex中组合action的使用

vuex中组合action的使用相关推荐

最新文章

热门文章