mall-web-ssr/pages/index.vue

<template>
  <div class="index">
    <carousel>
      <kind-category @loadchild="loadProductKinds"></kind-category>
    </carousel>
    <advert></advert>
    <floor-list></floor-list>
    <news></news>
    <partner></partner>
  </div>
</template>
<script>
  import { KindCategory, Carousel, Advert, FloorList, Partner, News } from '~components/home'

  export default {
    name: 'index',
    layout: 'main',
    fetch ({ store }) {
      return Promise.all([
     //   store.dispatch('loadFloors')
    //    store.dispatch('loadBanners'),
    //    store.dispatch('loadProductKinds', { id: 0 }),
    //    store.dispatch('loadNewsSnapshot', { page: 1, pageSize: 10 })
      ])
    },
    components: {
      KindCategory,
      Carousel,
      Advert,
      FloorList,
      Partner,
      News
    },
    methods: {
      loadProductKinds (id) {
        this.$store.dispatch('loadAllProductKinds', {id})
      }
    }
  }
</script>

<style scoped>
  @import "~swiper/dist/css/swiper.css";
</style>