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

模式


点击对应进入歌单

触发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()播放即可
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容