Vuex中actions何时完成及后续业务逻辑调用

最新推荐文章于 2022-11-13 20:23:18 发布
最新推荐文章于 2022-11-13 20:23:18 发布
阅读量519 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lebron_hsm1005/article/details/106075429
版权
本文探讨了在Vuex中如何正确处理actions的执行顺序，特别是涉及异步操作如getPosition和getAddress时，如何确保state更新后再进行后续业务逻辑。通过利用actions返回的promise并使用.then()来控制调用顺序，解决了这个问题。同时提到了mapActions的使用，并提供了参考文档链接。
摘要由CSDN通过智能技术生成

先上问题，我的需求是在调用actions中的getPosition来获取经纬度，从而修改state中的值，再通过state中的经纬度发起getAddress获取当前位置的请求，这就关乎到一个调用时机的问题

	 // 获取经纬度
    async getPosition({
   commit}, that) {
   
      const {
    data: res } = await that.$http.get('https://elm.cangdu.org/v1/cities?type=guess')
      commit(RECEIVE_POSITION, {
   latitude: res.latitude, longitude: res
最低0.47元/天 解锁文章
Lebronhsm_1005
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vuex源码学习（七）action和mutation如何被调用的（调用篇）
weixin_34355881的博客
04-01 483
前置篇不会那可不行！Vuex源码学习（六）action和mutation如何被调用的（前置准备篇） 在前置准备篇我们已经知道被处理好的action与mutation都被集中放置在哪里了。下面就要看dispacth和commit如何去调用它们。 dispatch与commit的实现 commit: 首先呢我们要校正参数，把传入的参数整理下 主要是处理这种形式 // 接收一个对象 this.$sto...
前端技术之：如何在vuex状态管理action异步调用结束后执行UI中的方法
popgis的专栏
11-08 1917
一、问题的起源 最近在做vue.js项目时，遇到了vuex状态管理action与vue.js方法互相通信、互操作的问题。场景如下图所示： 二、第一种解决方法 例如，我们在页面初始化的时候，需要从服务端通过API接口获取数据，数据获取成功前需要显示Loading状态框，数据获取完成后，需要将Loading状态框隐藏。 这是一种相对比较简单的应用场景，解决起来当然也比较简单。 我们可以通过s...
VUE笔记--详情页跳转以及制作
weixin_43902063的博客
02-23 2558
详情页跳转以及制作 1.详情页跳转 利用router来进行页面的跳转，配置详情页的路由，eg：/detail:iid 从首页获取到每个小goodsitem的iid，从而跳转到其相应的详情页，进而获得相应的详情信息。 2.Bug1 解决从其他页面返回到首页，保存首页的停留位置 查看在整个app中有没有使用keep-alive 设置一个变量y值，通过activated（）和deactivated...
vuex的核心概念和运行机制
weixin_54228045的博客
05-05 152
核心概念: （1）State: 存放基本数据 ----辅助函数mapState: 当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键。 ​ （2）getters：专门来计算state中的数据，相当于state中数据的计算属性 —辅助函数mapGetters辅助函数: mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局
Vuex: 使用 actions 执行异步代码
学习笔记
12-23 333
mutations 中的 methods 必须是同步的，但是使用 actions，可以实现代码的异步执行： mutations: { increment(state) { state.counter += 2; }, increase(state, payload) { state.counter = state.counter + payload.value; }, }, actions: { increment(context) {
Vuex的actions属性的具体使用
10-17
总之，Vuex 的 `actions` 属性提供了处理异步操作的能力，它允许我们在不违反 Vuex 的状态管理原则的情况下，优雅地处理复杂的业务逻辑。通过与 `mutations` 配合使用，我们可以确保状态变更的有序性和可预测性，...
vue中在vuex的actions中请求数据实例
10-16
今天小编就为大家分享一篇vue中在vuex的actions中请求数据实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vuex中mutations与actions的区别详解
01-21
事实上在 vuex 里面 actions 只是一个架构性的概念，并不是必须的，说到底只是一个函数，你在里面想干嘛都可以，只要最后触发 mutation 就行。异步竞态怎么处理那是用户自己的事情。 vuex 真正限制你的只有 mutation...
Vue - Vuex - actions的使用详解
qq_33962481的博客
08-23 1505
文章目录一、 一、
Vue之Vuex的getters和actions的使用
Radom&7
11-06 7444
继前文《Vue之Vuex(状态管理模式)》，在store.js添加getters和actions方法： import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state:{ count:1 }, mutations:{ increment...
Vue/Vuex (actions) 核心概念 使用方法、辅助函数 mapActions使用方法说明
m0_64494670的博客
11-13 1827
Vue/Vuex (actions) 核心概念 使用方法、辅助函数 mapActions使用方法说明
fetch请求设置请求头错误导致无法跨域
蓝枫秋千的踩坑记录
12-06 8287
前言 项目中遇到了一个问题，如下，看起来像是跨域问题，但是实际上在服务端设置了Access-Control-Allow-Origin *，并且之前是一直用的好好的，但是这次重新封装了一下请求，就不行了。 Access to fetch at '***' from origin '***' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-C
vuex中action的使用场景及具体使用说明
zuo-yiran的博客
10-13 8488
使用场景说明： 项目中未读数字提醒功能实现。首页部分是模块列表，点击不同的模块可以进入子模块，子模块列表的未读数数据和首页使用同一接口（该接口返回所有有未读数据的模块的未读数字） 使用说明： 以上场景适合使用vuex中的action属性，在不同的模块中直接调用action中的方法即可。 实现： store.js import Vue from 'vue' import Vuex from 'vuex' import axios from 'axios' Vue.use(Vuex) const state
在vue组件中调用actions.js中方法的两种途径
weixin_45838680的博客
06-17 3461
一、 使用该方法，并传入参数： 二、
基于vue技术栈-移动端外卖项目实战问题总结
没有名字适合我的博客
03-11 2148
前言 为了深入学习vue全家桶及前后台交互技术，包括vuex，vue-router，ajax等，模仿某平台写一个简化版的移动端项目出来 技术栈 vue2 + vuex + vue-router + webpack + ES6/7 + axios + stylus 项目链接 点击进入我的github项目 关于接口数据 在github上找的别人做好的一个超大型外卖平台项目api文档里的其中几项 引用大...
Access-Control-Allow-Origin 实现 Web 跨域访问
zhangfeng1742的专栏
10-17 1298
Web 开发中，经常会遇到不能跨域访问的问题，现在有了很好的解决方法：只要在后端返回的 Response Headers 中加入 Access-Control-Allow-Origin，并指定允许访问的域名。 参考：https://blog.csdn.net/u010716097/article/details/72782130 https://blog.csdn.net/hehexiaoxi...
vuex actions使用(action和mutations的区别)
周家大小姐
01-09 2万+
我们先说说actions和mutations的区别,mutations在请求数据的时候是同步的;而actions是异步的  action的功能和mutation是类似的，都是去变更store里的state，不过action和mutation有两点不同： 1、action主要处理的是异步的操作，mutation必须同步执行，而action就不受这样的限制，也就是说action中我们既可以处理同...
【跨域问题】Access to XMLHttpRequest at'http://localhost:解决跨域问题，前后端连调，前端Vue后端SSM，解决Vue项目打包后打开页面图片不显示问题
热门推荐
OrangeChenZ的博客
01-14 22万+
问题： Failed to load resource: net::ERR_CONNECTION_REFUSED 这个问题我是因为后端服务没有启动，报错的； 跨域问题： Access to XMLHttpRequest at ‘http://localhost:9090/guidance/findGuidancePage’ from origin ‘http://localhost:8000’ h...
vuex 调用actions
最新发布
05-13
在 Vue.js 应用程序中，我们可以使用 Vuex 来管理应用程序的状态。Vuex 中的 actions 用于处理异步操作并提交 mutations 来更新状态。下面是调用 actions 的步骤： 1. 在 Vue 组件中引入 Vuex 的辅助函数 `mapActions`： ```javascript import { mapActions } from 'vuex' ``` 2. 在组件的 `methods` 中使用 `mapActions` 辅助函数来将 actions 映射为组件的方法： ```javascript methods: { ...mapActions([ 'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')` 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)` ]) } ``` 3. 调用映射后的方法来触发 actions： ```javascript this.increment() this.incrementBy(10) ``` 注意：上述示例中的 `increment` 和 `incrementBy` 是 actions 的名称，需要在 Vuex store 中定义。示例中使用的是 `mapActions` 辅助函数的简化写法，也可以使用完整写法来进行调用： ```javascript methods: { ...mapActions({ add: 'increment', // 将 `this.add()` 映射为 `this.$store.dispatch('increment')` addBy: 'incrementBy' // 将 `this.addBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)` }) } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值