Vue音乐播放器组件数据定义

音乐播放器首先应该是全局的，在哪里都可以播放，布局应该放在APP.Vue里面，多个组件都可以打开播放器，播放器的数据应该是全局的，使用Vuex来管理播放器数据。通常有state，getters， mutations-types， mutations几个文佳

store文件夹里面新建一个state.js文件存放播放器数据

state 是定义原始底层数据

import { playMode } from 'common/js/config'
const state = {
  singer: {},
  // 播放器状态
  playing: false,
  // 歌手名称
  singerName: '',
  // 歌曲名称
  songName: '',
  // 播放列表
  playlist: [],
  // 顺序列表
  sequenceList: [],
  // 播放模式
  mode: playMode.sequence,
  // 播放索引
  currentIndex: -1
}

export default state

播放模式的配置config.js

export const playMode = {
  // 顺序
  sequence: 0,
  // 循坏
  loop: 1,
  // 随机
  random: 2
}

getters 是对数据的映射，映射到组件，可以是函数，根据state不同值计算

getters除了担任简单的代理，还能担任计算属性

对数据的映射并根据currentIndex计算currentSong放进组件getters.js

export const singer = state => state.singer

export const singerName = state => state.singerName

export const songName = state => state.songName

export const playing = state => state.playing

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] || {}
}

mutations-types 看看有哪些修改动作，动词，字符串常量

mutations-types.js

export const SET_SINGER = 'SET_SINGER'

export const SET_SINGER_NAME = 'SET_SINGER_NAME'

export const SET_SONG_NAME = 'SET_SONG_NAME'

export const SET_PLAYING_STATE = 'SET_PLAYING_STATE'

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'

`

mutations 定义对数据修改的逻辑

import * as types from './mutation-types'
const mutations = {
  [types.SET_SINGER] (state, singer) {
    state.singer = singer
  },
  [types.SET_SINGER_NAME] (state, singerName) {
    state.singerName = singerName
  },
  [types.SET_SONG_NAME] (state, songName) {
    state.songName = songName
  },
  [types.SET_PLAYING_STATE] (state, flag) {
    state.playing = 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
  }
}
export default mutations