Vue音乐--搜索页面08_点击歌曲

大概步骤：

目标效果

---

七、点击歌曲li

• 要点：
  • 与排行榜歌曲列表的歌曲li点击对比
    • 是把获取到的所有歌曲列表设置为vuex中的播放列表
  • 而搜索结果的歌曲li是把一首歌添加进播放列表，而且不是简单push，而是插入正在播放
  • 因此要和排行榜歌曲li一样要操作的mutations是多个，利用到actions，来操作多个mutations

（一）、点击触发actions事件

↓searchSuggest.vue

import {
   mapActions} from 'vuex' //引入点击存入数据方法的vuex

/*****跳转路由，歌手详情页*********/
  selectItem(item){
   
    //判断是歌手，并把歌手数据提取出出来
    if(item.type===TYPE_SINGER){
     
    }else{
   
      //点击是歌曲,修改歌曲列表数据
      this.insertSong(item)
    }
  },

/*******选择歌曲插入歌曲列表数据*************/
    ...mapActions([
      'insertSong',
    ])
  },

（二）、把当前歌曲添加进播放相关vuex数据中

↓store- ->