前文

今天我们通过一个黑马程序员的一个小案例，来继续巩固Vuex方面的知识

一、首页静态样式排布

从样式图片推断元素排列结构

首页拆分为六个部分

导航条 、搜索框 、 轮播图 、 导航 、 主会场部分 、 商品列表

1.样式分析

导航条 、搜索框模块一定采取固定定位，而且层级最大。其它模块依次排列即可

2.渲染分析

其中轮播图、导航、商品列表数据由网络请求数据提供，并且一定采用v-for去渲染多个重复列表

3.路由分析

点击搜索框、导航模块会发生路由跳转

二、搜索历史部分

需求拆解：

1.点击按钮后，根据搜索关键字跳转指定页面(传递参数)

2.搜索后，判断关键字是否存在，存在将位置提到最前方，不存在，存储至最数组后方

3.点击按钮，删除所有记录，点击历史记录，也会跳转到指定页面

4.数据统一存储到本地，进行持久化存储

代码实现：

三、基于搜索关键字确定搜索内容

需求拆解：

1.获取传递的路由参数

2.根据接口，编写请求

3.调用接口，获取数据并且渲染

四、根据列表栏选中内容渲染数据

先看返回的数据格式，发现返回一个对象数组，关键信息：里面包含每个模块的姓名，以及包含模块内容的子数组

需求拆解：

1.左侧栏：直接v-for渲染模块名称、绑定id值为key值、绑定点击事件，切换标识属性，为索引号，作为样式和数据切换的标准。

2.右侧栏：渲染标识属性的特定内容，绑定key值，绑定点击事件，发起网络请求，传递id值

 <div v-for="item in list[activeIndex]?.children" @click="$router.push(`/searchlist?categoryId=${item.category_id}`)" :key="item.category_id" class="cate-goods">
          <img :src="item.image?.external_url" alt=""/>
          <p> {{ item.name }}</p>
        </div>

设计思路：面向返回数据编程