014_Vue音乐播放器（myLove.vue 喜欢歌曲列表）

首先是vuex中的数据

给头部添加一个进入喜欢歌曲列表的导航

点击时跳到myLove.vue组件

myLove.vue 组件，格式可参照kugoouSongList组件

<template>
  <div class="myLove">
    <header class="backgroundDiv">
      <div @click="goBack" class="el-icon-arrow-left goBack"></div>
      <span class="title">myLove~</span>
    </header>
    <ul :style="isPaddingBottom" v-if="loveList&&loveList.length>0">
      <li @click="selectItem(item,index)" v-for="(item,index) in loveList" :key="'info-'+index">
        <div class="container">
          <h2 class="name">
            <span style="font-weight:bold;">{{index+1 | indexFilter}}&nbsp;&nbsp;</span>
            {{item.filename}}
          </h2>
        </div>
      </li>
    </ul>
    <div v-else class="noPlayList">喜欢的列表空空如也~</div>
  </div>
</template>

<script>
import { mapGetters, mapActions, mapMutations } from "vuex";
export default {
  props: {},
  data() {
    return {};
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    selectItem(item, index) {
      //使用mapActions 暴露出来的 selectPlay函数，来设置播放器的播放内容
      this.selectPlay({
        list: this.loveList, //为何不直接使用 item ，item在当前组件表示点击的某首歌曲，
        //此处传入的list将整个songs列表都传递进去，可以通过index查找，比起单首歌曲的播放列表，
        //显然完整的歌曲列表更加方便后续的使用
        index: index
      });
    },
    ...mapActions(["selectPlay"])
  },
  watch: {
    fullScreen: function(newVal) {
      newVal == true
        ? (this.isPaddingBottom = "")
        : (this.isPaddingBottom = "padding-bottom:3.5rem");
    },
    playList: function(newVal) {
      newVal.length == 0
        ? (this.isPaddingBottom = "")
        : (this.isPaddingBottom = "padding-bottom:3.5rem");
    }
  },
  computed: {
    ...mapGetters(["playList", "fullScreen", "loveList"]),
    isPaddingBottom: {
      get: function() {
        if (this.playList) {
          if (this.playList.length) {
            return this.fullScreen ? "" : "padding-bottom:3.5rem";
          }
        } else {
          return "";
        }
      },
      set: function(newValue) {}
    }
  },
  filters: {
    indexFilter: function(val) {
      if (val.toString().length == 1) {
        return "0" + val;
      } else {
        return val;
      }
    }
  }
};
</script>

<style lang="less" scoped>

接下来就是

1、 通过点击 player.vue组件的喜欢，添加或删除数据并提交到loveList数组

2、 通过点击 playlist.vue组件的喜欢，添加或删除数据并提交到loveList数组

player.vue组件

playlist.vue组件

由于这个playlist.vue组件是可以展示歌曲的，所以需要从playlist播放歌单数据和lovelist喜欢列表做判断，如果是在喜欢列表的歌曲，需要显示为喜欢状态。（所以需要将当前span的歌曲信息作为自定义属性保存，下标找到所属于哪首歌曲）

效果图：