04.歌单==>歌曲数据请求==>传给audio

2018-07-04  本文已影响0人  LeungJhowe

模式


点击对应进入歌单
触发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()播放即可
上一篇 下一篇

猜你喜欢

热点阅读