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之间有什么区别&…

基于canvas的骨骼动画

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

Python APSchedule安装使用与源码分析

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

NetBeans 7.4的本机Java打包

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

基于Vue开发一个日历组件

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

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

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

Java开发人员访谈的MindMap

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

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

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

4 张动图解释为什么(什么时候)使用 Redux

dev-reading/fe 是一个阅读、导读、速读的 repo&#xff0c;不要依赖于 dev-reading/fe 学习知识。本 repo 只是一个快速了解文章内容的工具&#xff0c;并不提供全文解读和翻译。你可以通过本平台快速了解文章里面的内容&#xff0c;找到感兴趣的文章&#xff0c;然后去阅读全…

您正在使用什么垃圾收集器?

我们的研究实验室正全速前进。 随着最近的资金注入 &#xff0c;我们只能保证我们不断创新的步伐只会加快。 我们进行的部分研究与GC优化有关。 在处理这个有趣领域中的问题时&#xff0c;我们认为可以分享一些有关GC算法使用的见解。 为此&#xff0c;我们对使用特定GC算法的…

前端布局推进剂 - 间距规范化

我是一个爱折腾设计的前端&#xff0c;一直都在标榜自己的页面还原是多么的牛 X 。怎么做到页面还原&#xff1f;我有一个最笨但是有效的方法&#xff0c;就是把设计稿直接存成图片&#xff0c;作为背景图然后临摹着设计稿进行开发。我觉得自己太有才了。像素级还原有没有&…

echarts折线图相关

optionJKDLine {  title: {text: 告警数量趋势图,textStyle:{  //标题样式fontStyle:normal,fontFamily:sans-serif,fontSize:12    }},tooltip: {trigger: axis},legend: {  //图例,默认显示},grid: {  //图表距离left: -3%,right: 5%,bottom: 3%,top:20%,contai…

一个关于fixed抖动的小bug

前言 大家都知道position: fixed用于生成绝对定位的元素&#xff0c;相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 突然发现自己之前写的网页有个小bug&#xff1a;在购买页面的…

腾讯Node.js基础设施TSW正式开源

经过六年的迭代与沉淀&#xff0c;腾讯Tencent Server Web (以下简称TSW)这一公司级运维组件于今日正式开源。TSW是面向WEB前端开发者&#xff0c;以提升问题定位效率为初衷&#xff0c;提供云抓包、全息日志和异常发现的Node.js基础设施。TSW每天为百亿次请求提供稳定服务&…

ORM框架greenDao 2 (用于了解旧版本的使用方法,目前最新版本为3.2.2,使用注释的方式来生成)...

摘要&#xff1a; Android中对SQLite数据库使用&#xff0c;是一件非常频繁的事情。现今&#xff0c;也有非常多的SQLite处理的开源框架&#xff0c;其中最著名的greenDao&#xff0c;它以占用资源少&#xff0c;处理效率高等特点&#xff0c;成为优秀的ORM框架之一。那么对于g…

配置MySQL以进行ADF开发

大家好。 今天&#xff0c;我将向您展示如何为Oracle ADF开发配置MySQL数据库。 恕我直言&#xff0c;当您将ADF与其他数据库而不是Oracle DB一起使用时&#xff0c;您将无法使用Oracle ADF的全部功能&#xff0c;有时您会发现自己正在寻找解决方法&#xff0c;以实现某些行为…