mall-web-ssr/pages/index.vue

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

  export default {
    name: 'index',
    layout (context) {
      return context.store.state.option.isMobile ? 'mobile' : 'main'
    },
    components: {
      KindCategory,
      Carousel,
      Advert,
      FloorList,
      Partner,
      News,
      Home
    },
    fetch ({store}) {
      return !store.state.option.isMobile ? Promise.all([
        store.dispatch('loadFloors'),
        store.dispatch('loadBanners', {type: 'home'}),
        store.dispatch('loadProductKinds', { id: 0 }),
        store.dispatch('loadNewsSnapshot', { page: 1, pageSize: 10 })
      ]) : []
    },
    methods: {
      loadProductKinds (id) {
        this.$store.dispatch('loadAllProductKinds', {id})
      }
    },
    computed: {
      isMobile: function () {
        return this.$store.state.option.isMobile
      }
    }
  }
</script>