vue调用接口获取后台数据_Vuex 存储||获取后台接口数据

如果你对 Vuex 有一定的了解的话呢，可以继续这一篇的学习了，如果没有的话，

建议先看一看我的上一篇 Vuex基础：地址在下面

这篇接着上一篇：

这篇将利用到 Vuex的详解与使用和Vuex刷新数据不丢失两篇的内容结合；

1、首先我们先找个可以测试用的接口，这里我放一个我经常测试接口的一个地址：

如下图所示，有个 /users 那么很显然，里面存放的用户数据，那么我们今天就用这个，

你请求接口的地址就是，http://jsonplaceholder.typicode.com/users ，/user 就是接在地址后面的，

好了，废话不多说继续吧。

services.js 是我封装的 axios，下面的 getUser 就是获取用户信息的方法

2、现在我们开始在页面里面请求这个接口了：

这里我写的 sessionStorage.setItem("UserList",JSON.stringify(this.userList));

意思是：将this.userList 也就是请求的用户的数据转为字符串，"UserList" 就是将用户的数据命名为 UserList 存放到 sessionStorage中，

请求到的数据，我都打印出来给你们看看；

现在我们看看，在SessionStorage 中的状态,UserList 对应的 value数据都有。存储成功，

3、现在，我们去放到 Vuex 中：

state 中的 userList 用户数据，这里 sessionStorage.getItem('UserList') 是获取 sessionStorage.getItem 中名位 'UserList' 的数据们

同时，getters 里面也配置一下

现在我们来验证一下，是否在Vuex里面操作成功；

我们在，...mapGetters 中添加

然后去写个循环，把数组里面的所有name 遍历出来

现在，我们去页面上看看效果。

很好，成功的将 Vuex 中存储的用户数据给拿到了。

vue调用接口获取后台数据_Vuex 存储||获取后台接口数据相关推荐

vuex异步获取数据_vuex 异步获取数据，却无法渲染页面
报错信息为无法获取到program.teacher 返回undefined 但是奇怪的是 program.title 都能获取到..唯独获取不到多层的.. 模拟的数据 { "program ...
基于EMR的新一代数据湖存储加速技术详解
摘要:本文整理自阿里云开源大数据平台数据湖存储团队孙大鹏在7月17日阿里云数据湖技术专场交流会的分享.本篇内容主要分为两个部分: 背景介绍 JindoData 数据湖存储解决方案点击查看直播回放背 ...
爬虫数据持久化存储——写入文件
这里写目录标题爬虫数据持久化存储--写入文件 open方法文件的读取及写入爬虫数据持久化存储--csv文件爬虫数据处理:操作数据库模块--pymysql pymysql介绍: pymysql安 ...
Android基础——数据持久化存储
数据持久化存储文件存储数据保存数据读取键值对存储数据保存数据读取数据库存储数据库创建增加数据更新数据删除数据查询数据使用事物升级数据库内容来自于第一行代码中数据持久化存储 ...
数据中心存储解决方案市场将迎来快速增长
数据中心存储解决方案主要用于管理数据中心内的所有资源.该解决方案包括硬盘驱动器.备份管理软件和网络技术.此外,还包括管理数据存储和检索整个过程的存储策略和过程. 发展中国家中智慧城市项目的建设不断增加 ...
08_clickhouse主键/索引的工作机制(MergeTree的稀疏索引、索引的生成过程、索引的查询)，数据标记的工作机制（数据存储、数据标记、数据查询、数据查询示例）（学习笔记）
5.主键/索引的工作机制 5.1.MergeTree的稀疏索引 5.2.索引的生成过程 5.3.索引的查询 6.数据标记的工作机制 6.1.数据存储 6.2.数据标记 6.3.数据查询 6.4.数据查 ...
1 week110的zookeeper的安装 + zookeeper提供少量数据的存储
下面是在weekend110上的zookeeper的安装在此之前,先进行快照备份. 在这里,为了后续的zookeeper配置需要,在/home/hadoop/下,新建data目录,再新建zookee ...
mysql 表的存储类型_MySQL数据表存储引擎类型及特性
数据表类型(存储引擎) 常见引擎比对特点 Myisam InnoDB Memory BDB Archive 存储限制无穷制 64TB 有没有没有事务安然 - 支撑 - 支撑 - 锁机制表锁 ...
海量时序数据低成本存储架构设计
导读近些年来得益于传感器技术.无线网络技术.云计算和人工智能技术的发展,物联网的基础设施日益完善,并应用到了新能源.智能家居.车联网.智慧工业等众多领域中,实现了"人与物".&q ...

vue调用接口获取后台数据_Vuex 存储||获取后台接口数据

vue调用接口获取后台数据_Vuex 存储||获取后台接口数据相关推荐

最新文章

热门文章