获取猜你喜欢数据，类型定义和列表渲染

1.封装获取猜你喜欢数据API

2.组件挂载完毕调用API

这个是接口文档：

 

 

下面：

 组件内部获取数据,我们其他的都是在index.vue里面获取的：

 我们来看一下数据，可以看到数据很多（items商品信息）：

 定义数据类型：

 这里的分页我们其他地方也会用到，因此我们把他定义成一个通用的类型，知识列表数据有变化

 

 商品类型，也就是Items类型

 

通用分页结果类型如下，新建 `src/types/global.d.ts` 文件：

```ts
/** 通用分页结果类型 */
export type PageResult<T> = {
  /** 列表数据 */
  items: T[]
  /** 总条数 */
  counts: number
  /** 当前页数 */
  page: number
  /** 总页数 */
  pages: number
  /** 每页条数 */
  pageSize: number
}
```

猜你喜欢-商品类型如下，存放到 `src/types/home.d.ts` 文件：

```typescript
/** 猜你喜欢-商品类型 */
export type GuessItem = {
  /** 商品描述 */
  desc: string
  /** 商品折扣 */
  discount: number
  /** id */
  id: string
  /** 商品名称 */
  name: string
  /** 商品已下单数量 */
  orderNum: number
  /** 商品图片 */
  picture: string
  /** 商品价格 */
  price: number
}

 

 

 到这里数据就定义完成了下面就可以渲染了

就按照这样改：

 看一下效果：