模式
点击对应进入歌单
触发click事件selectItem
歌单、歌手、排行点击item分别出发的vuex mutations事件
以下以recommend为例
created() {
this._getRecommend()
this._getDiscList()
},
methods: {
selectItem(item) { //点击歌单进入列表页面
this.$router.push({
path: `/recommend/${item.dissid}`
})
this.setDisc(item)
},
_getRecommend() { // slider轮播
getRecommend().then((res) => {
if (res.code === ERR_OK) {
this.recommends = res.data.slider
}
})
},
_getDiscList() { // 歌单
getDiscList().then((res) => {
if (res.code === ERR_OK) {
this.discList = res.data.list
// console.log(res.data.list)
}
}).catch((err) => {
console.log(err)
})
},
在dics组建中,mapGetters获得disc数据
再请求歌曲列表
此时的songs是带有url的songs,然后再disc组件把songs传到musiclist组件
再到music-list组件,
点击派发事件到musiclist,传item(歌),index(索引)
music-list负责具体
actions下
当vuex中有数据后
在player中就可以通过Getters获得currentSong在赋给audio,然后audio.play()播放即可
网友评论