vue电商项目(三)——开发search页面

目录

一、页面分析

二、获取数据到组件

1、获取数据

2、通过仓库getter简化数据

3、根据参数返回数据

(1)将请求封装成一个方法

(2)准备一个响应式数据

4、在发送请求之前准备好数据

​三、渲染组件内容

1、完成子组件searchSelacter

2、通过监听路由从而更新数据

3、完成面包屑

(1)分类面包屑

(2)关键字面包屑

(3)品牌面包屑

(4)平台售卖属性面包屑

4、排序操作

(1)谁有类名

(2)箭头业务

(3)控制数据变化

5、完成分页器

---

因为静态组件已经是写好的，所以直接将给的资源中复制替换页面的静态组件即可。

一、页面分析

该页面一共被分为一下几个部分

1、面包屑（带小x号的部分）

2、searchSelacter子组件

3、详情部分，就是综合到价格部分

4、good-List商品展示，展示的所有商品

5、分页器

二、获取数据到组件

1、获取数据

 准备API,这里api是post,且需要带参数，至少是一个空对象

 在search仓库中进行三连环

2、通过仓库getter简化数据

1、getter中函数的第一个形参可以拿到当前小仓库的state。

2、通过mapGetters获取数据的时候因为getter并没有分开，所以在计算属性中就不需要写成对象的形式，而是直接结构赋值即可。

3、为了防止没网的时候，所以至少要返回一个空数组

3、根据参数返回数据

(1)将请求封装成一个方法

因为参数不同，返回的结果不同，所以我们要根据参数发多次请求获取参数。所以我们将发送请求封装成一个方法，所以之前组件挂载直接调用函数getData()即可。

(2)准备一个响应式数据

以后会根据不同的情况改变数据内容，从而返回不同的内容

4、在发送请求之前准备好数据

要在发送请求之前整理好数据，所以我们可以在beforeMounted中整理参数

Object.assign(a,b,c)b和c会将a相同属性名的替换属性值替换掉

三、渲染组件内容

1、完成子组件searchSelacter

因为数据已经获取存放在仓库中了，且通过getters简化过了，所以直接获取到组件，然后根据v-for进行遍历就可以了。