vue尚品汇商城项目-day03【22.开发Floor组件】

以你之姓@ 2024-03-24 12:46 75阅读 0赞

![在这里插入图片描述][201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]

#### 文章目录 ####

*   *  22.开发Floor组件
 *  本人其他相关文章链接

### 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.（优化）针对三级菜单联动进行优化，优化方向为减少查询】][vue_-day03_16._Search_TypeNav_17.]  
2.[vue尚品汇商城项目-day03【18.合并params和query参数（Header组件+TypeNav组件）】][vue_-day03_18._params_query_Header_TypeNav]  
3.[vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件）】][vue_-day03_vue_-19.mockjs_Home_ListContainer_Floor]  
4.[vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】][vue_-day03_20._Banner_21._swiper]  
5.[vue尚品汇商城项目-day03【22.开发Floor组件】][vue_-day03_22._Floor]

[201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/3d4c5b8df6af4bb78c92481ea639bc62.png
[vue_-day03_16._Search_TypeNav_17.]: https://blog.csdn.net/a924382407/article/details/129893325
[vue_-day03_18._params_query_Header_TypeNav]: https://blog.csdn.net/a924382407/article/details/129893392
[vue_-day03_vue_-19.mockjs_Home_ListContainer_Floor]: https://blog.csdn.net/a924382407/article/details/129893467
[vue_-day03_20._Banner_21._swiper]: https://blog.csdn.net/a924382407/article/details/129893511
[vue_-day03_22._Floor]: https://blog.csdn.net/a924382407/article/details/129893541