VUE移动端音乐APP学习【八】：播放器vuex的相关应用

在components目录下创建player=>player.vue组件

 

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

 

• normal-player：展开的播放器

• mini-player ：收起后固定在底部的播放器

将播放器组件player.vue放在app.vue下，因为它不是任何一个路由相关的播放器，切换路由不会影响播放器的播放

<template>
  <div id="app">
    <m-header></m-header>
    <tab></tab>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <player></player>
  </div>
</template>

运行后看到播放器默认展开，这并不是预期结果。

 

在player.vue中，从vuex取数据控制播放器的展开收起状态

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

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'player',
  computed: {
    ...mapGetters([
      'fullScreen',
      'playlist',
    ]),
  },
};
</script>

歌曲列表使用的是song-list组件开发。在song-list.vue添加点击事件，在methods中实现这个方法，它只派发该事件，告诉父组件music-list.vue：子组件song-list被点击了，以及点击的元素和索引是什么。

 

<li @click="selectItem(song,index)" v-for="(song,index) in songs" class="item" :key="song.id">


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

 

在music-list组件中可以监听到该事件，当歌曲被点击的时候，需要设置播放整个歌单列表，playlist和sequenceList，其次根据点击的索引，设置currentIndex,再次设置playerstate,还有默认展开大的播放器fullScreen，设置这些数据实际上需要提交很多次mutations，如果在一个动作中多次修改mutations，往往要使用actions进行一次封装。

 

import * as types from './mutation-types';
// 选择播放
export const selectPlay = function ({ commit, state }, { list, index }) {
  commit(types.SET_SEQUENCE_LIST, list);
  commit(types.SET_PLAYLIST, list);
  commit(types.SET_CURRENT_INDEX, index);
  commit(types.SET_FULL_SCREEN, true);
  commit(types.SET_PLAYING_STATE, true);
};

 

在music-list中使用mapActions将actions中的selectPlay函数映射到music-list组件methods对象中，然后在selectItem函数中调用selectPlay就可以提交多个mutation

    selectItem(item, index) {
      this.selectPlay({
        list: this.songs,
        index,
      });
    },
    ...mapActions([
      'selectPlay',
    ]),

运行效果：