【音乐App】—— Vue-music 项目学习笔记：播放器内置组件开发（一）

【音乐App】—— Vue-music 项目学习笔记：播放器内置组件开发（一）

前言：以下内容均为学习慕课网高级实战课程的实践爬坑笔记。

项目github地址：https://github.com/66Web/ljq_vue_music，欢迎Star。

---

播放暂停	前进后退

一、播放器Vuex数据设计

• 需求： 播放器可以通过歌手详情列表、歌单详情列表、排行榜、搜索结果多种组件打开，因此播放器数据一定是全局的
• state.js目录下：定义数据

  import {playMode} from '@/common/js/config'
  
  const state = {
          singer: {},
          playing: false, //播放状态
          fullScreen: false, //播放器展开方式：全屏或收起
          playlist: [], //播放列表（随机模式下与顺序列表不同）
          sequenceList: [], //顺序播放列表
          mode: playMode.sequence, //播放模式: 顺序、循环、随机
          currentIndex: -1 //当前播放歌曲的index(当前播放歌曲为playlist[index])
  }

• common->js目录下：创建config.js配置项目相关

  //播放器播放模式: 顺序、循环、随机
  export const playMode = {
         sequence: 0, 
         loop: 1,
         random: 2
  }

• getter.js目录下：数据映射（类似于计算属性）

  export const playing = state => state.playing
  export const fullScreen = state => state.fullScreen
  export const playlist = state => state.playlist
  export const sequenceList = state => state.sequenceList
  export const mode = state => state.mode
  export const currentIndex = state => state.currentIndex
  
  export const currentSong = (state) => {
            return state.playlist[state.currentIndex] || {}
  }

  组件中可以通过mapgetters拿到这些数据

• mutaion-type.js目录下：定义事件类型字符串常量

  export const SET_PLAYING_STATE = 'SET_PLAYING_STATE'
  export const SET_FULL_SCREEN = 'SET_FULL_SCREEN'
  export const SET_PLAYLIST = 'SET_PLAYLIST'
  export const SET_SEQUENCE_LIST = 'SET_SEQUENCE_LIST'
  export const SET_PLAY_MODE = 'SET_PLAY_MODE'
  export const SET_CURRENT_INDEX = 'SET_CURRENT_INDEX'

  mutation中都是动作，前缀加SET、UPDATE等

• mutaion.js目录下：操作state

  const mutations = {
         [types.SET_SINGER](state, singer){
               state.singer = singer
         },
         [types.SET_PLAYING_STATE](state, flag){
               state.playing = flag
         },
         [types.SET_FULL_SCREEN](state, flag){
               state.fullScreen = flag
         },
         [types.SET_PLAYLIST](state, list){
               state.playlist = list
         },
         [types.SET_SEQUENCE_LIST](state, list){
               state.sequenceList = list
         },
         [types.SET_PLAY_MODE](state, mode){
               state.mode = mode
         },
         [types.SET_CURRENT_INDEX](state, index){
               state.currentIndex = index
         }
  } 

二、播放器Vuex的相关应用

• components->player目录下：创建player.vue

1. 基础DOM:

   <div class="normal-player">
           播放器
   </div>
   <div class="mini-player"></div>

•  App.vue中应用player组件：因为它不是任何一个路由相关组件，而是应用相关播放器，切换路由不会影响播放器的播放

  <player></player>

• player.vue中获取数据：控制播放器的显示隐藏

  import {mapGetters} from 'vuex'
  
  computed: {
        ...mapGetters([
             'fullScreen',
             'playlist'
        ])
  }

  通过v-show判断播放列表有内容时，显示播放器，依据fullScreen控制显示不同的播放器

  <div class="player" v-show="playlist.length">
          <div class="normal-player" v-show="fullScreen">
                播放器
          </div>
          <div class="mini-player" v-show="!fullScreen"></div>
  </div>

• song-list.vue中添加点击播放事件：基础组件不写业务逻辑，只派发事件并传递相关数据

  @click="selectItem(song, index)

  selectItem(item, index){
        this.$emit('select', item, index)
  }

  子组件行为，只依赖本身相关，不依赖外部调用组件的需求，传出的数据可以不都使用

• music-list.vue中监听select事件

  <song-list :songs="songs" @select