VUE移动端音乐APP学习【七】：播放器vuex数据设计

播放器能够经过歌手详情列表，歌单的详情列表，排行榜甚至是搜索结果去打开，即多个组件均可以操做这个播放器，当这个播放器一旦打开之后，缩小播放器，它仍然能够在后台播放运行。因此控制播放器的数据必定是全局的，那么就须要经过vuex来管理这些数据。

在state.js里 vuex须要管理如下数据：

• 播放器的播放状态：①播放 ②暂停
• 播放器展开和收起状态
• 播放列表和顺序列表。（区别：①当顺序播放时，这2个表的顺序是一致的 ②当随机播放时，这2个表的顺序确定是不同的）
• 播放器的播放模式
• 播放器当前播放的索引。

const state = {
  singer: {},
  // 播放状态默认为暂停
  playing: false,
  // 播放器默认为收起
  fullScreen: false,
  // 播放列表
  playlist: [],
  // 顺序列表
  sequenceList: [],
  // 播放模式默认为顺序播放
  mode: playMode.sequence,
  // 当前播放索引
  currentIndex: -1,
};

因为播放器的播放模式直接用0 1 2表示会使语义化不强,因此在common=>js文件夹下新建config.js

export const playMode = {
  sequence: 0,
  loop: 1,
  random: 2,
};

有了当前播放索引currentIndex后，currentSong是能够经过playlist和currentIndex计算而来的:currentSong = playlist [currentIndex]

接着在getters.js里对这些数据进行代理:

export const playing = (state) => state.playing;
export const fullScreen = (state) => state.fullScreen;
export const playlist = (state) => state.playing;
export const sequenceList = (state) => state.sequenceList;
export const mode = (state) => state.mode;
export const currentIndex = (state) => state.currentIndex;

getters除了能够作简单的代理以外呢，还能够担任计算属性的角色。currentSong不须要设在state里面，可是组件仍是须要直接访问它。咱们能够经过getters计算currentSong

 

export const currentSong = (state) => {
  return state.playlist[state.currentIndex] || {};
};

 

在写mutations.js以前，一样先在mutation-types.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';

在mutations.js中引入mutation-types做关联，并可对state进行修改

[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; },