持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情

前言

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

mock接口

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

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

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

封装get请求

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

👉 由于get请求也需要配置baseURL，所以需要将baseURL提取出来。

const $axios = axios.create({
  baseURL: 'https://www.fastmock.site/mock/eb925863ecc46f2108cd43d75f96c1cd/pro',
  time: 10000
})

axios.create方法是初始化axios
初始化的时候，可以传入一个对象。
baseURL就可以放在对象里面，time就表示多长时间算请求超时。

👉 get请求函数

export const get = (url, params = {}) => {
  return new Promise((resolve, reject) => {
    $axios.get(url, { params }).then((response) => {
      resolve(response)
    }, err => {
      reject(err)
    })
  })
}

get请求传入的是一个params。
需要结构出params中的数据才能传入接口，axios中的get函数会自动帮我们拼接解构出来的params。

Nearby.vue组件请求接口

🌀 在组件中请求接口，可以参考之前的Login和Register页面。

👉 引入所需的方法

import { ref } from 'vue'
import { get } from '../../utils/request'

👉 在setup函数外层将逻辑封装

const useNearbyListEffect = () => {
  const nearbyList = ref([])
  const getNearbyList = async () => {
    const result = await get('/api/shop/list')
    if (result.data.code === 0 && result.data.data.length) {
      nearbyList.value = result.data.data
    }
  }
  return { nearbyList, getNearbyList }
}

👉 setup函数中引用useNearbyListEffect函数

setup () {
    const { nearbyList, getNearbyList } = useNearbyListEffect()
    getNearbyList()
    return { nearbyList }
}

进入首页就要获取列表数据，所以需要直接在setup函数中调用getNearbyList函数。

Nearby.vue组件改造

🌀 由于接口定义的数据项和页面中有些部分不太吻合，所以我们需要重新改造一下。

👉 修改适配的数据值

<div class="nearby__item" v-for="item in nearbyList" :key="item.id">
    <img :src="item.imgUrl" class="nearby__item__img">
    <div class="nearby__content">
      <div class="nearby__content__title">{{item.name}}</div>
      <div class="nearby__content__tags">
        <span class="nearby__content__tag">月售：{{item.sales}}</span>
        <span class="nearby__content__tag">起送：{{item.expressLimit}}</span>
        <span class="nearby__content__tag">基础运费：{{item.expressPrice}}</span>
      </div>
      <p class="nearby__content__highlight">{{item.slogan}}</p>
    </div>
</div>

中间的tags的数据并没有按照之前的数组形式返回，所以就无须嵌套循环了。

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

前言

mock接口

封装get请求

Nearby.vue组件请求接口

Nearby.vue组件改造

总结