美文网首页
04.歌单==>歌曲数据请求==>传给audio

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

作者: LeungJhowe | 来源:发表于2018-07-04 09:42 被阅读0次

    模式


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

    相关文章

      网友评论

          本文标题:04.歌单==>歌曲数据请求==>传给audio

          本文链接:https://www.haomeiwen.com/subject/rnnsuftx.html