vue.js2.0+webpack中如何实现先通过接口拿到分类列表，之后点击分类名时，通过接口拿到分类详情

Question

用脚手架开始了一个项目，多页面的，在首页要实现一个侧边栏选择分类的功能。
在进入首页时就已经通过/api/getSortList接口拿到了分类列表，name渲染到组件，点击name侧边栏的右边部分通过/api/getSortDetail?id=...显示该分类的简介，并通过api/getProductList?sortid=...显示该分类下的商品列表

一个侧边栏用到了好多接口啊 初学者求助大神！

Answer 1

这个跟我做的新闻列表相似的，列表页请求后台列表数据，用vue-router把id传到新闻子页面，然后重新根据id来请求具体的数据

Answer 2

有三种处理方法吧：

1. 单纯从组件出发，侧边栏组件（Sidebar）负责处理所有的API请求，在created时获取sort list并渲染到模版里，在每个分类名点击时把对应的id作为参数传到获取简介和商品列表的API方法里，再将数据传递到右侧组件（Main）中。由于这两个组件应该没有父子关系，所以需要用到eventBus去处理？（还没用过2.0里的自带数据传输系统）。

2. 用vuex简化第一种方法中数据传递这一部分。Sidebar取到数据后扔进vuex，Main再从vuex里头取出来用。

3. 用vue-router解决所有API请求都堆积在Sidebar中的问题。Sidebar渲染完模版之后，点击分类名时不再触发后两个API请求，而是改变页面路由。对应的Main中监听路由，当路由变化时，通过路由传递的sortId发起后两个API请求，并将结果对应渲染。具体可以看下面的demo。

<!-- Sidebar.vue -->
<template>
  <ul>
    <li
      v-for="sort of sortList">
      <router-link
        :to="'/sort/' + sort.id">{{ sort.name }}</router-link>  
    </li>
  </ul>
</template>
<script>
  export default {
    data () {
      return {
        sortList: []
      }
    },
    created () {
      getSortList()
        .then(val => this.sortList = val)
        .catch(e => console.log(e))
    }
  }
</script>

<!-- Main.vue -->
<template>
  <div>
    {{ detail }}
  </div>
  <ul>
    <li
      v-for="product of productList">{{ product.name }}</li>
  </ul>
</template>
<script>
  // router map: /sort/:sortId
  export default {
    data () {
      return {
        id: this.$route.params.sortId || null,
        detail: '',
        productList: []
      }
    },
    methods: {
      fetchData () {
        getSortDetail(this.id)
          .then(val => this.detail = val)
          .catch(e => console.log(e))

        getProductList(this.id)
          .then(val => this.productList = val)
          .catch(e => console.log(e))
      }
    },
    watch: {
      '$route': 'fetchData'
    },
    created () {
      if (this.id) {
        this.fetchData();
      }
    }
  }
</script>