vue慕课网音乐项目手记：39-vuex榜单详情的vuex路由通信

首先呢，是top-list.vue的布局，这里当然很简单啦：

<template>
  <transition name="slide">
    <music-list :title="title" :bg-image="bgImage"></music-list>
  </transition>
</template>

<style lang="stylus" scoped>
  .slide-enter, .slide-leave-to
    transform translate3d(100%, 0, 0)
  .slide-enter-active, .slide-leave-active
    transition all 0.3s ease
</style>

然后就是实现vuex的数据传递了：
state里面存储一个空的topList

topList: {}

mutationTypes和mutation里面写修改的方法：

export const SET_TOP_LIST = 'SET_TOP_LIST'

[types.SET_TOP_LIST] (state, topList) {
    state.topList = topList
  }

然后是getters里面的获取数据：

export const topList = state => state.topList

好了，到这里，vuex的套路就完成了。
rank组件里面的方法：

...mapMutations({
  setTopList: 'SET_TOP_LIST'
})

selectItem (item) {
      this.$router.push({
        path: `/rank/${item.id}`
      })
      this.setTopList(item)
    },

然后就是top-list组件的使用啦：

computed: {
    title () {
      return this.topList.topTitle
    },
    bgImage () {
      return this.topList.picUrl
    },
    ...mapGetters([
      'topList'
    ])
  },

到此结束。