歌曲播放页面的数据vuex管理

1.state.js

import {playMode} from '@/common/js/config'
const state = {
  singer:{},
  playing:false,
  fullScreen:false,
  playlist:[],
  sequenceList:[],
  mode:playMode.sequence,
  currentIndex:-1,
}

export default state

2.getters.js

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

3.mutation-types.js

export const SET_SINGER = 'SET_SINGER'

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'

4.mutations.js

import * as types from './mutation-types'
const mutations = {
  [types.SET_SINGER](state,singer){//mutations接收两个参数，第一个是state另外一个是传递过来的值
    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
  },
}


export default mutations