尚品汇（四）

一、商品分类以及过渡动画

前提:组件必须要有v-if | v-show 才能实现过渡动画

 <transition name="sort">
          <div class="sort" v-show="show">
            <div class="all-sort-list2">
              <!--一级分类地盘-->
              <div
                class="item"
                v-for="(c1, index) in category"
                :key="c1.categoryId"
              >
                <h3
                  @mouseenter="enterHandler(index)"
                  :class="{ active: currentIndex == index }"
                >
                  <a
                    :data-categoryName="c1.categoryName"
                    :data-category1Id="c1.categoryId"
                    >{{ c1.categoryName }}</a
                  >
                </h3>
                <!-- 通过JS实现动态行内样式，进行二级、三级分类的显示与隐藏(display:none|block切换的) -->
                <div
                  class="item-list clearfix"
                  :style="{ display: currentIndex == index ? 'block' : 'none' }"
                >
                  <!--二级分类-->
                  <div
                    class="subitem"
                    v-for="(c2) in c1.categoryChild"
                    :key="c2.categoryId"
                  >
                    <dl class="fore">
                      <dt>
                        <a
                          :data-categoryName="c2.categoryName"
                          :data-category2Id="c2.categoryId"
                          >{{ c2.categoryName }}</a
                        >
                      </dt>
                      <dd>
                        <!--三级分类-->
                        <em
                          v-for="(c3) in c2.categoryChild"
                          :key="c3.categoryId"
                        >
                          <a
                            :data-categoryName="c3.categoryName"
                            :data-category3Id="c3.categoryId"
                            >{{ c3.categoryName }}</a
                          >
                        </em>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </transition>

    /*过渡动画:商品分类 进入阶段*/
    //过渡动画的开始状态
    .sort-enter {
      height: 0px;
    }
//自定义动画时间\速率
    .sort-enter-active {
      transition: all 0.3s;
    }
       //过渡动画结束状态(进入)
    .sort-enter-to {
      height: 461px;
    }

二、typeNav商品分类的优化

  mounted() {
    //App的根组件挂载完毕,发一次请求即可.
    //派发一个action ，获取商品分类的三级联动数组
    this.$store.dispatch("getCategory");
  },

三、合并参数

1.合并params和query参数

除了三级联动列表可以使得从home页跳转到search页，还有搜索栏可以。

 //点击商品分类按钮的时候,如果路径当中携带params参数,需要合并携带给search模块
        if (this.$route.params.keyword) {
          locations.params = this.$route.params;
        }
        //目前商品分类这里携带参数只有query参数
        this.$router.push(locations);

四、mock.js模拟数据

1.开发Home首页中的ListContainer组件和Floor组件

服务器返回的数据（接口）只有商品分类菜单分类数据，对于ListContainer组件和Floor组件服务器没有提供

Mock.js

（1）安装

npm install --save mock js

（2）模拟数据

①在项目当中src文件夹中创建mock文件夹
②准备JSON数据（mock文件夹中创建相应的JSON文件）—格式化，不能留有空格
③把mock文件需要的数据存放在public文件夹中，public文件夹在打包时，会把相应的资源原封不动地打包到dist文件夹中
④开始mock，创建mockServe.js

//引入mockjs插件开始模拟数据
import Mock from 'mockjs';
//引入数据：JSON数据格式数据
//比如:图片资源、JSON资源【里面不能书写export关键字】，这些资源默认对外暴露【默认暴露】
import banner from './banner.json';
import floor from './floor.json';

//接口:相当于nodejs里面中间件
//第一个参数：接口的地址 第二个参数:向这个接口发请求获取到的数据 
//Mock插件：中间件默认是GET请求
Mock.mock("/mock/banner", { code: 200, data: banner });
//Mock插件：中间件默认是GET请求
Mock.mock('/mock/floor', { code: 200, data: floor });

⑤在main.js中引入

//引入mockServe文件,让咱们模拟接口跑起来
import "@/mock/mockServe.js";

2.获取Banner轮播图的数据

listContainer组件挂载完毕向仓库发送请求获取mock数据

// pages\home\listContainer\index.vue

//辅助函数获取仓库的数据
import { mapState } from "vuex";

  computed: {
    ...mapState({
      bannerList: (state) => state.home.bannerList,
    }),
  },

mounted() {
    //派发action,通知vuex发请求,将数据存储在仓库中 去寻找相应的仓库
    this.$store.dispatch("getBannerList");
  },

home仓库定义相应的action函数

//仓库存储数据的地方
let state = {
    //首页轮播图的数据
    bannerList: [],
};

//可以处理业务逻辑【if、异步语句等等】
let actions = {
    //获取banner图的action
    async getBannerList({ commit, state, dispatch }) {
        //获取首页轮播图数据
        let result = await reqBannerList();
        if (result.code == 200) {
            // console.log('actions发请求')
            commit("GETBANNERLIST", result.data);
        }
    }
};

//唯一可以修改仓库数据地方【工人】
let mutations = {
    GETBANNERLIST(state, bannerList) {
        state.bannerList = bannerList;
    },
};