@[toc]

22.开发Floor组件

切记：仓库当中的state的数据格式，你别瞎写、胡写、乱写，数据格式取决于服务器返回的数据

修改代码：

src/api/index.js

//获取floor数据
export const mockGetFloorList = ()=> mockRequests.get("/floor")

src/store/home/index.js

import {getCategoryList, mockGetBannerList, mockGetFloorList} from '@/api'
//Home模块的小仓库
//actions代表一系列动作，可以书写自己的业务逻辑，也可以处理异步
const actions = {   
    //获取floor组件数据
    async mockGetFloorList(context) {
        let response = await mockGetFloorList();
        console.log("获取Floor组件数据:", response);
        if (response.code == 200) {
            context.commit("MOCK_GET_FLOOR_LIST", response.data)
        }
    },
}
//mutations代表维护，操作维护的是state中的数据，且state中数据只能在mutations中处理
const mutations = {
    MOCK_GET_FLOOR_LIST(state, floorList) {
        state.floorList = floorList
    }
}
//state代表仓库中的数据
const state = {
    //floor组件的数据
    floorList:[]
}

src/pages/Home/index.vue

<Floor v-for="floorItem in floorList" :key="floorItem.id" :floorItem="floorItem"></Floor>

import {mapState} from "vuex"

mounted() {
    this.$store.dispatch("mockGetFloorList");
  },
computed: {
    ...mapState({floorList: state=>state.home.floorList})
  }

src/pages/Home/Floor/index.vue

import Swiper from "swiper";

props: ["floorItem"],
  mounted() {
    //第一次书写Swiper的时候：在mounted当中书写是不可以的，但是为什么现在这里可以啦！
    //第一次书写轮播图的时候，是在当前组件内部发请求、动态渲染解构【前台至少服务器数据需要回来】，因此当年的写法在这里不行
    //现在的这种写法为什么可以：因为请求是父组件发的，父组件通过props传递过来的，而且结构都已经有了的情况下执行mounted
    var mySwiper = new Swiper(this.$refs.floor1Swiper, {
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
        clickable: true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    })
  }

注意点1：

问题：mockGetFloorList这个action在哪里触发？可以放在Floor组件中触发吗？

答案：不能在Floor组件中触发。因为Home组件中使用Floor组件标签，所以必须得在Home组件中触发，进行v-for结构循环遍历展示，然后把需要的值传递给Floor组件中使用。

注意点2：v-for也可以用在自定义组件标签中

注意点3：

问题：为啥第一次书写轮播图的时候实例化swiper放在mounted()中就失效，而Floor中实例化swiper放在mounted()中却生效了？

答案：第一次书写轮播图的时候，是在当前ListContainer组件内部发请求、动态渲染结构【前台至少服务器数据需要回来】，因此当年的写法失效，而Floor组件需要的数据不是在Floor组件内部发请求的，而是在父组件Home中发请求并v-for动态渲染的Floor组件标签，同时结构都已经渲染挂在好了，然后传给Floor组件数据内部使用，所以在Floor组件中mounted()实例化swiper是可以生效的。

本人其他相关文章链接

1.vue尚品汇商城项目-day03【16.开发Search组件模块中的TypeNav商品分类菜单（过渡动画效果）+17.（优化）针对三级菜单联动进行优化，优化方向为减少查询】
2.vue尚品汇商城项目-day03【18.合并params和query参数（Header组件+TypeNav组件）】
3.vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件）】
4.vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】
5.vue尚品汇商城项目-day03【22.开发Floor组件】