【Vue3从零开始-实战】S12：首页列表数据动态化

前言

实战已经开始了！之前的文章中，我们把登录注册并且都可以调用接口请求的功能做完了，而且把逻辑和组件都拆分出来单独维护。本篇文章主要是为后面的商家详情页做准备，在首页中有一个店铺的列表，之前是在页面组件中把数据固定起来的，现在就需要将数据做成动态化了。而且还会将axios初始化的部分拆分出来，定义一些新的数据。

mock接口

🌀 动态化数据最关键的第一步就是把接口配置出来。

👉 在fastmock官网中配置列表接口

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DGgf4Aou-1658392855776)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e09294ef984427e8b7b92ed31ea6a42~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]

• 列表接口无需传参，所以使用get请求。
• 返回数据中配置了data，就是动态列表数据了。

封装get请求

👉 打开utils目录下面的request.js文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IHHjFuNN-1658392855776)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d9a9634a3ddb40cf92e3863