vue慕课网音乐项目手记：55-播放控件的删除一首歌的实现

通过actions去改变歌曲的currentIndex，playlist和sequencelist

export const deleteSong = function ({commit, state}, song) {
let playlist = state.playList.slice()
获取当前playlist的歌曲，创建一个副本，以下同
let sequencelist = state.sequenceList.slice()
let currentIndex = state.currentIndex
获取当前的currentIndex
let pIndex = findIndex(playlist, song)
查找点击的歌曲在playlist中的位置
playlist.splice(pIndex, 1)
删除
let sIndex = findIndex(sequencelist, song)
sequencelist.splice(sIndex, 1)
// 如果当前的歌曲在删除的歌曲之后，需要吧index–
if (currentIndex > pIndex || currentIndex === playlist.length) {
currentIndex–
}
commit(types.SET_PLAYLIST, playlist)
commit(types.SET_SEQUENCE_LIST, sequencelist)
commit(types.SET_CURRENT_INDEX, currentIndex)
if (!playlist.length) {
commit(types.SET_PLAYING_STATE, false)
}
}

组件中调用

deleteOne (item) {
      this.deleteSong(item)
      this.playing(true)
      删除之后，当前歌曲置播放状态
    },

最后解决两个bug

if (!this.playList.length) {
        this.hide()
      }

如果歌曲只有一首也删除了，那么就隐藏掉。

watch’的时候，如果没有newSong了，就直接return掉。