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.playlist;
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;
  },