首先呢,是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'
])
},
到此结束。