Nuxt中如何使用Vuex-Store异步获取数据

Nuxt是一个基于Vue.js的通用型框架,它集成了使用Vue开发的绝大数组件/框架。

长话短说如何在Vuex-store中获取异步数据呢?

在Nuxt中由于集合了Vuex还有其他的一些配置,大大的方便了我们使用Vuex;在Nuxt官方文档中写到:


在这里笔者为了方便使用了模块的方式去使用store;

1.1 首先现在store目录下新建.js文件,由于业务需求新建了几个模块的.js文件。


接下来我们一起看一下js文件中是如何新建模块方法的:

1.2 在state方法中初始化基本数据;


1.3 在mutation方法中更新数据

在mutations中会接收state作为第一个参数并且可以接收其他传参;(Tips:一条重要的原则就是要记住 mutation 必须是同步函数。)

在组件中调用mutations中的方法改变状态树种的数据


1.4 在store里如何调用异步数据?

由于mutation方法中只能执行同步方法,如何在store中获取远程服务器中的数据呢?

在此Vuex提供了一个解决方法action,action是一个类似于mutation的方法,它可以包含任何任意异步操作,不同之处在于action不能直接修改状态只能提交mutation;


在actions中定义好方法后需要在组件中使用store.dispatch进行触发;(Tips:注意文件位置)


Ps:在这里只是针对笔者的使用方式进行讨论,其他调用方式参考官方文档;

至此两种简单的改变状态树中的数据方法结束,后续笔者还会继续添加方法,如有错误请多多指教;


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366871.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Struts2面试问答

Struts2是用Java开发Web应用程序的著名框架之一。 最近,我写了很多Struts2教程 ,在这篇文章中,我列出了一些重要的Struts2面试问题以及答案,以帮助您进行面试。 什么是Struts2? Struts1和Struts2之间有什么区别&…

php怎么改标题,PHP – 如何更改包含header.php的页面标题?

扩展Dainis Abols答案,以及关于输出处理的问题,考虑以下&#xff1a;你的header.php标题标签设置为< title>&#xff05;TITLE&#xff05;< / title&gt ;;“&#xff05;”很重要,因为几乎没有人输入&#xff05;TITLE&#xff05;所以你可以在以后使用str_repla…

基于canvas的骨骼动画

最近学习到了一种关于canvas的骨骼动画&#xff0c;听这个名字就知道他和canvas之前的动画不同&#xff0c;不知道你有没有兴趣了解一下呢&#xff1f;关于骨骼动画最初是无意间在腾讯团队上看到的&#xff0c;但是由于他官网的教程是在是少之又少&#xff0c;也就仅有一个小de…

Python APSchedule安装使用与源码分析

我们的项目中用apschedule作为核心定时调度模块。所以对apschedule进行了一些调查和源码级的分析。 1、为什么选择apschedule&#xff1f; 听信了一句话&#xff0c;apschedule之于python就像是quartz之于java。实际用起来还是不错的。 2、安装 # pip安装方式 $ pip install ap…

短信验证登录实现流程

以手机号码为参数调用后台接口发送登录验证码&#xff0c;注意同一号码发送短信的时间间隔和每日次数阈值后台接口按规则要求生成验证码将手机号码(Key)和验证码(Value)存入服务器缓存&#xff0c;同时设置缓存有效时间将验证码填充短信模板作为短信内容&#xff0c;调用第三方…

NetBeans 7.4的本机Java打包

成为“ NetBeans 74 NewAndNoteworthy ”页面的NetBeans 7.4的新功能之一是“本机打包 ”&#xff0c;在该页面上被描述为“ JavaSE项目现在支持使用JavaFX提供的本机打包技术来创建本机包。 ” 我将使用一个非常简单的示例来演示NetBeans 7.4中的本机打包功能。 下一个代码清…

基于Vue开发一个日历组件

最近在做一个类似课程表的需求&#xff0c;需要自制一个日历来支持功能及展现&#xff0c;就顺便研究一下应该怎么开发日历组件。 更新 2.23修复了2026年2月份会渲染多一行的bug&#xff0c;谢谢深蓝一人童鞋提出的bug&#xff0c;解决方案是给二月份的日历做特殊处理&#xf…

php 打开word乱码怎么办,如何解决php word 乱码问题

php word乱码的解决办法&#xff1a;首先打开“/Writer/Word2007/Base.php”文件&#xff1b;然后添加“$objWriter->writeAttribute(‘w:eastAsia’, $font)”内容&#xff1b;最后保存修改即可。PHPword解决中文乱码一、增加东亚字体支持打开并编辑路径/Writer/Word2007/B…

MySQL5.7本地首次登录win10报错修改

1、打开MySQL目录下的my.ini文件&#xff0c;在文件的最后添加一行“skip-grant-tables”&#xff0c;保存并关闭文件。&#xff08;Win10默认安装&#xff0c;my.ini在C:\ProgramData\MySQL\MySQL Server 5.7&#xff09; 2、重启MySQL57和MySQL Router服务。 3、通过命令行窗…

Python-函数的参数

Python定义函数非常简单&#xff0c;而且具有很高的灵活度。函数的参数传递方式多种多样。需要记忆和理解。 1.位置参数&#xff1a; 举例&#xff0c; def power(x): return x * x power&#xff08;x&#xff09;函数中&#xff0c;x就是一个位置参数。调用时&#xff0c;必须…

Java开发人员访谈的MindMap

多年来&#xff0c;我曾在许多Java开发人员访谈中担任小组成员。 之前&#xff0c;我曾写过一篇标题为“成功进行软件工程师技术面试的7大技巧”的文章&#xff0c;其中涵盖了很少的一般准则。 在本文中&#xff0c;我将分享一个思维导图&#xff0c;其中包含Java开发人员访谈中…

php发邮箱验证码找回密码,织梦dede会员通过邮箱找回密码方法

首先打开文件&#xff1a; /member/resetpassword.php 这是织梦会员找回密码的核心文件&#xff01;在148行有这么一句&#xff1a; showmsg(对不起&#xff0c;临时密码错误, -1); 看来问题就在这了&#xff01; 但是怎么引起的呢&#xff0c;别急继续看代码从125行往下看&a…

送给大家一个好看的简历神器

很多人看到里边有好看的东西就习惯性的点进来看看&#xff0c;还一边点一边想 —— 好看的简历我见多了&#xff0c;你这个又能好看到哪里去。我想差不多可以&#xff1a; 哪里吧因为最近有在准备简历&#xff0c;就习惯性的找一找有没有现成的简历模板。结果全是付费的&#x…

PHP简单实现单点登录功能示例

1.准备两个虚拟域名 127.0.0.1 www.openpoor.com127.0.0.1 www.myspace.com 2.在openpoor的根目录下创建以下文件 index.PHP 123456789101112131415161718<?phpsession_start();?><!DOCTYPE html><html><head><meta charset"UTF-8"/&…

JUNG 计算图属性,中心度,偏心率,直径,半径

本文介绍利用Java的第三方API JUNG 计算图中&#xff1a; closeness centrality&#xff1b;// 图中某节点的 接近中心性/亲密中心性 betweenness centrality&#xff1b;// 图中某节点的 中介中心性/介数中心性 distance; // 图中两节点的最短距离 eccentricity; // 图中某节…

Java VM –提防YoungGen空间

您可能从我们以前的面向性能的文章中看到&#xff0c;健康的JVM是实现最佳应用程序性能和稳定性的最重要目标之一。 这样的健康评估通常仅关注主要收集的频率&#xff08;避免&#xff09;或检测内存泄漏的存在。 年轻一代空间或短寿命物体的大小和足迹如何&#xff1f; 本文…

小程序绘图工具painter-json文件绘制保存分享图-可点击任意元素触发函数

Painter是由酷家乐移动前端团队打造的一款小程序绘图组件。 原项目地址&#xff1a;https://github.com/Kujiale-Mobile/Painter 新版地址&#xff1a;https://github.com/shesw/Painter 这款交互版原来是为了针对业务中的新需求而由我自己开发的&#xff0c;后来需求改动&a…

sweetalert php,SweetAlert插件

用户#姓名操作{% for user in all_user %}{{ forloop.counter }}{{ user.username }}编辑删除{% endfor %}var _thisthis;swal({title:"你确定要删除吗&#xff1f;",text:"删除可就找不回来了哦&#xff01;",type:"warning",showCancelButton:…

python集合以及编码初识

一.集合 set 集合是无序的,天然能去重,是可变的.例:s {1,2,3,4,5}   1 s {} 2 s1 {1} 3 print(type(s)) # 空{}就是字典 4 print(type(s1)) #集合 集合的基本操作: 1.增 s {1,2,3,22,,ss,(3,4)} s.add(元素) s.update(alex) #迭代添加 alex会被分割添加 2.删 s…

JS 字符串操作总结

【MDN】https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String 【参考】https://www.cnblogs.com/guoyeqiang/p/8178336.html 字符串转换 1、toString() var age 11; var ageAsString age.toString(); //字符串“11” var found true;…