vuex导入_为Vuex添加同步Action

最新推荐文章于 2024-04-23 15:41:18 发布
最新推荐文章于 2024-04-23 15:41:18 发布
阅读量1.1k 收藏 1
点赞数
文章标签： vuex导入
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_26872311/article/details/113031634
版权

为什么要添加同步Action？

在某些操作中，如获取内存中的数据时，需要立即返回对应的值，而Vuex的Action规定了只能返回一个Promise，这时，如果我们想获取返回值就需要使用then或者await，代码就会变得不直观，而如果触发Mutation再从State获取值也是同理，所以如何能让Action不是异步的又能保持和Vuex的Action拥有一样的功能呢？

添加同步Action

首先我们先看看Vuex的Action的结构是如何的：

可以看到，action中传入了context和data，所以我们添加的同步action也需要增加这两个参数，同时将store绑定到action的this。

在index.js导入对应的模块和同步actions对象，同时导出修改过的同步action，用于mapSyncActions，并为每个同步action绑定this和注入参数。

然后，我们还要实现对应的dispatch方法和mapActions方法，来实现调用该action，在index.js同级文件夹下添加一个syncActions.js

如果要在Vuex模块中使用，只需要导入syncActions.js然后同Vuex的action调用一样即可。

若要在组件中使用，只需要同mapActions一样使用mapSyncActions即可，或者使用dispatchSync。

结语

说实在搞这个其实没啥用，因为用到的机会其实也很小，只是当初我把XK-Note重构到Vuex时，不想修改太多的代码逻辑搞出来的，本文的实例具体可以查看XK-Note。

声明: 本文采用 BY-NC-SA 协议进行授权，如无注明均为原创，转载请注明转自 青空之蓝

本文地址: 为Vuex添加同步Action

Nek0K1ng
关注
VUEX加同步与异步
m0_47906344的博客
08-30 4076
VUEX加同步异步 目录VUEX加同步异步主要内容代码部分 主要内容 vue中各个组件之间传值 1.父子组件 父组件–>子组件，通过子组件的自定义属性：props 子组件–>父组件，通过自定义事件：this.$emit(‘事件名’,参数1,参数2,…); 2.非父子组件或父子组件 通过数据总数Bus，this.root.root.root.emit(‘事件名’,参数1,参数2,…) 3.非父子组件或父子组件 更好的方式是在vue中使用vuex 方法1: 用组件之间通讯。这样写很麻烦，并且写着
Vuex介绍&同步取值&异步问题
qq_53601862的博客
11-18 5806
前言：我们在之前就有了子类与父类之间的传参，又有利用总线进行传参，但两者都有一定的弊端。如：总线定义组件太多容易混淆等；所以接下来我们会利用VueX进行参数传。 目录 一：VueX简介 一：VueX简介 官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库）， 让其在各个页面上实现数据的共享包括状态，并且可操作 Vuex分成五个部分： 1.State：单一状态树 2.Getters：状态获取 3...
vuex里的action异步函数变成同步代码
weixin_57246351的博客
10-16 2060
src/store/modules/user.js actions: { asyncSetToken(store, data) { return new Promise((resolve, reject) => { login(data).then(res => { console.log(res) store.commit('setToken', res.data) resolve()
vuex中mutations和actions 异步同步实现方法
最新发布
︶￣城南花已开
04-23 518
vuex中mutations和actions 异步同步实现方法
Vuex
weixin_30873847的博客
09-05 283
1. vue中各个组件之间传值 1.父子组件 父组件-->子组件，通过子组件的自定义属性：props 子组件-->父组件，通过自定义事件：this.$emit('事件名',参数1,参数2,...); 2.非父子组件或父子组件 通过数据总数Bus，this.$root.$emit('事件名',参数1,参数2,...) 3.非父子组件或父子组...
Vuex —— 同步和异步请求
灵魂学者的博客
06-27 2850
上一篇讲到 Vuex 状态管理的内容，那么本篇就来将关于Vuex中的同步和异步数据请求，先来简单的回顾一下 Vuex ，Vuex 中有五个核心属性：state 、getter、mutation、action、module。state: 存放数据状态，不能被直接的修改；getter: 基于 state 的计算属性；mutation: 直接更新 state 的多个方法的对象；action: 通过 mutation 间接更新state；module：分模块化；
一听就会---vuex存值取值，辅助函数mapActions,mapMutations超详细版
weixin_51035283的博客
11-10 1108
首先vuex（有些面试官会说 状态管理工具）可以把它理解成一个仓库，和redux一样，但是相对于redux来说 vuex 比较好理解，想学习 redux 同学关注我后续会发放 redux 的学习方法。 store 是默认生成的文件夹，store 翻译成中文是仓库的意思，所以就可以把它理解成一个存储数据的仓库。 好了废话不多说直接上 store 文件夹下的 index.js 文件 首先在默认的 store 库下的 index.js 文件 import Vue from 'vue' .
vuex同步action
11-25
Vuex同步action是指在Vuex中用于修改state的同步操作。以下是一个简单的示例： 引用[1]中的代码示例： ```javascript // index.js import { mapSyncActions } from 'vuex'; import { increment } from './actions'...
Vuex之五个属性值&&同步存取值&&异步问题
weixin_56069070的博客
11-17 1407
前言 今天要分享的知识是Vuex 码字不易，转载请说明！！！ 目录 目标 Vuex是什么？ 一、Vuex中的各个js文件的用途 二、vuex使用步骤 ①安装npm install vuex -S ②在src下创建store模块，分别维护state/actions/mutations/getters ③在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块 ④在main.js中导入并使用store实例 三、Vuex的传值问题 ①先按照数据库路径..
详解vuex的简单使用
11-28
在 `index.js` 文件中，通常会导入 `state.js`、`mutations.js`、`getters.js` 及其他模块，然后组合成 Vuex store 实例，并将其导出，供 Vue 应用使用。例如： ```javascript import Vue from 'vue'; import Vuex ...
vuex基本使用
qq_53241930的博客
08-10 451
Actions：提交更改数据的方法（同步），通过dispatch触发，不能直接修改state，首先在组件中通过dispatch触发action，然后在action函数内部commit触发mutation，通过mutation修改state状态值。当我们构建一个中大型的单页面应用程序时，Vuex可以更好的帮助我们在组件外部统一管理状态。Mutations：提交更改数据的方法（同步），通过commit触发。Getters：从基本数据派生出来的数据。State：基本数据，数据存放地。5、修改state中的数据。.
Vuex中mutation为什么是同步的action为什么是异步
Rice_w的博客
02-18 2423
在了解mutation与action之前我们先了解一下什么是Vuex 以及Vuex的作用是什么？Vuex是一个专为Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex是一个状态集中管理器，解决多组件之间的数据通信，数据是可预测的（响应式的）。Vuex有5个重要的概念state：存储公共数据（相当于组件中的data）mutations：修改数据方法的集合，必须是同步。
Vue官方文档（50）: vuex中Action的用法
amadeus_liu2的博客
11-24 570
vuex
Vuex系列之 Action 的使用
老__L的博客
12-25 5011
Vuex系列之 Action 的使用
vuex actions使用(action和mutations的区别)
热门推荐
周家大小姐
01-09 2万+
我们先说说actions和mutations的区别,mutations在请求数据的时候是同步的;而actions是异步的  action的功能和mutation是类似的，都是去变更store里的state，不过action和mutation有两点不同： 1、action主要处理的是异步的操作，mutation必须同步执行，而action就不受这样的限制，也就是说action中我们既可以处理同...
第5节：actions异步修改状态
weixin_30411997的博客
01-24 387
actions和之前讲的Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态。至于什么是异步什么是同步这里我就不做太多解释了，如果你不懂自己去百度查一下吧。（视频中有讲解） 在store.js中声明actions actions是可以调用Mutations里的方法的，我们还是继续在上节课的代码基础上进行学习，在actions里调...
vuex----mutation和action的基本使用
weixin_30565327的博客
07-04 843
　　我们要实现的很简单，就是点击+1的count加一，点击-1的时候count-1 　　一、mutation 　　在vue 中，只有mutation 才能改变state. mutation 类似事件，每一个mutation都有一个类型和一个处理函数，因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state.所谓的类型其实就是名字，action去co...
vuex action 与mutations 的区别
hyl999的专栏
07-24 1807
vuex action 与mutations 的区别 面试没说清楚。这个太丢人回来整理下： 事实上在 vuex 里面actions 只是一个架构性的概念，并不是必须的，说到底只是一个函数，你在里面想干嘛都可以，只要最后触发 mutation就行。异步竞态怎么处理那是用户自己的事情。 Vuex.Store({ state, actions, mutation }); vue...
第4章 Vue全家桶(vue-router+vuex)- 4.18 vuex为什么要使用actions——异步起到同步的作用
jolinoy的博客
03-11 431
index.js代码： // store/index.js内容 import Vue from 'vue' //1.导入模块 import Vuex from 'vuex' //2.使用当前的插件 Vue.use(Vuex) const store = new Vuex.Store({ state: { //当前的状态 count:0 //vuex的基本使用第一步：设置数量count. }, getters: { //store的计算属性 }, mutation
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值