Vuex中的Action

最新推荐文章于 2025-06-11 15:05:01 发布
最新推荐文章于 2025-06-11 15:05:01 发布
阅读量1.9k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： # Vue 文章标签： vue Vuex Action 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43613849/article/details/118523784

我们强调, 不要再Mutation中进行异步操作.

        但是某些情况, 我们确实希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的. 这个时候怎么处理呢?

        Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.

1、Action的基本使用

 context是什么?

context是和store对象具有相同方法和属性的对象.

也就是说, 我们可以通过context去进行commit相关的操作, 可以获取context.state等.

 在Vue组件中, 如果我们调用action中的方法, 那么就需要使用dispatchn同样的, 也是支持传递payload）

具体如下图，先diapatch调用action，再在action里commit调用mutations

2、Action返回的Promise

如果我们希望，在功能函数里面执行完dispatch，dispatch的异步操作执行完成后，继续执行功能函数里面的后续操作，如何进行回调呢？这个时候就需要Promis

在Action中, 我们可以将异步操作放在一个Promise中, 并且在成功或者失败后, 调用对应的resolve或reject

参考链接：

https://www.bilibili.com/video/BV1H7411j7Mc?from=search&seid=10645859101733219162

Doe
关注
专栏目录
Vuex中action和mutation 区别
m0_38066007的博客
05-20 339
- mutation - 建议原子操作，每次只修改一个数据，不要贪多 - 必须是同步代码，方便查看 devTools 中的状态变化 - action - 可包含多个 mutation - 可以是异步操作 1 ...
Vue：Vuex-Action
ChinaDragon10的博客
08-15 1022
Action 类似于 mutation，不同在于： Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。
Vue实战指南：Vuex中Actions详解
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-16 2685
);
Vuex之action
weixin_34352449的博客
02-02 173
一般开发使用mutation已经足够，不过官网推荐mutation不要有异步操作，那么为了规范，我们应该把异步操作的方法都放在vuex提供的action里面。 Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。 Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提...
Vuex 中Mutation 和Action介绍
最新发布
yuren_xia的博客
06-11 515
state: {count: 0},// 基本 mutation（无参数）},// 带参数的 mutation});actions: {// 基本 action（无参数）}, 1000);},// 带参数且返回 Promise// 提交 mutation 修改状态resolve();// 通知调用方操作完成})});
Vuex的核心概念之Action
xiaozhang9的博客
09-09 491
1.在mutations中不能编写异步的代码，会导致vue调试器的显示出错。 在vuex中我们可以使用Action来执行异步操作。 2.打开store.js文件，修改Action，如下： actions: { addAsync(context,step){ setTimeout(()=>{ context.commit('add',step); },2000) } } 然后在Addition.vue中给按钮添加事件代码如下： <button @...
Vuex的核心概念：Action,问题呈现：计时器案例,定义Action,触发Action,触发actions异步任务时携带参数,触发actions的第二种方式 ,
我就知道你会来，我们一起进步吧！
03-18 1253
如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式间接变更数据。得出结论：在mutations函数中不能写异步的代码。触发actions的第二种方式。Action用于处理异步任务。此时我们就引出了Action。问题呈现：计时器案例。
详解vuex中action何时完成以及如何正确调用dispatch的思考
01-19
在项目中遇到关于action与dispatch使用的一些细节问题，经过搜索得到了一些答案。 特意在此提出，如有错误还请指出，十分感谢～ 问题1：如果action是异步的，那么怎么知道它什么时候完成？在vuex的官网给出了答案：...
详解关于Vuex的action传入多个参数的问题
10-17
在介绍如何在action中传入多个参数之前，我们首先简单回顾一下Vuex的基本概念。 - **state**: 存储状态（即数据）。 - **getters**: 类似于计算属性，用于派生出一些状态。 - **mutations**: 更改状态的方法，必须...
vuex中Actions详解
大剑师兰特的GIS世界
02-15 1188
Actions 是 Vuex 中的一个重要概念，用于处理异步操作和触发mutations。Actions 可以包含任意的 JavaScript 逻辑，包括异步操作（如发送 AJAX 请求）。Actions 通过调用 store.dispatch 方法来触发mutations。
vuex---action
weixin_43390711的博客
03-20 639
一、用途 不可直接改变状态，用来包含异步操作 二、定义 actions: { // context对象包含一下属性: // state，相当于store.state,在模块中为局部状态 // rootState，只存在于模块当中 // commit，相当于store.commit // dispatch，相当于store.dispatch // getters，相当于store.getters // rootGetters，//只存在于模块当中
VUE——VUEX【action】
weixin_63215361的博客
05-26 429
/ src/main.js 中的 Vuex Store 配置actions: {// 提交名为 INC 的 mutationasyncInc ：自定义的 action 名称1. commit：提交 mutation2. dispatch：触发其他 action3. state：访问当前 state4. getters：访问 getters5. payload ：调用 action 时传递的参数（如 {amount: 10}）
Vuex的Action学习
kaelyn_X的博客
03-01 815
Vuex 的 Action学习   Action 类似于 mutation，不同在于： Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。 目录： Vuex 的 Action学习 例子 将 store 注入到每个子组件 提交载荷（Payload） 对象风格的提交方式 结合 promise 例子   Actio...
vuex（二）Action
luck_lin
04-21 426
Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。快速构建一个express服务模拟后台响应数据：var express = require("express"); var app = express(); app.get("/api/carList", (req, res)=&gt;{ res....
Vuex-Action
weixin_33924312的博客
10-18 80
2019独角兽企业重金招聘Python工程师标准>>> ...
vuex中的Action
m0_68594618的博客
11-01 145
Action 类似于 mutation，不同在于： Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作
Vuex(五)--Vue核心概念actions
muzidigbig的博客
11-06 4046
Action 类似于 mutation，不同在于： - Action 提交的是 mutation，而不是直接变更状态。 - Action 可以包含任意异步操作。Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来...
vuex Action
kangkang_style的博客
01-10 250
Action 类似于 mutation，不同在于：           注意：Action：可以异步，但不能直接操作State。操作state的方法全部依靠commit mutation完成           Action 提交的是 mutation，而不是直接变更状态。           Action 可以包含任意异步操作。 简单的 action： const store = new ...
vuex中action方法调用
05-22
在Action中可以执行异步操作，然后再提交mutation来变更状态。 Action方法的基本调用如下： 1. 在Vuex store中定义action： ``` const actions = { async getUserInfo(context, payload) { // 这里可以进行异步...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值