08.vue2.x开发音乐App-使用Vuex准备音乐播放组件

因为需要在各个阶段都需要共享播放组件的信息，在任何的组件中都能够播放音乐，所以我们使用vuex。

https://vuex.vuejs.org/zh/guide/structure.html
安装vuex

vuex依赖于promise

官网：
https://vuex.vuejs.org/zh/guide/structure.html
https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart

1.在musicplayer中定义初始化的状态，getter方法，setter方法

// 播放器vueX的数据设计
const playMode = {
  sequence: 0,
  loop: 1,
  random: 2
}
// 定义state初始化状态
const state = {
  singer: {},
  playing: false,
  fullscreen: false,
  playlist: [],
  sequenceList: [],
  mode: playMode.sequence,
  currentIndex: -1
}
// 定义getters
const getters = {
  singer: (state) => {
    return state.singer
  },
  playing: (state) => {
    return state.playing
  },
  fullscreen: (state) => {
    return state.fullscreen
  },
  playlist: (state) => {
    return state.playlist
  },
  sequenceList: (state) => {
    return state.sequenceList
  },
  mode: (state) => {
    return state.mode
  },
  currentIndex: (state) => {
    return state.currentIndex
  },
  currentSong: (state) => {
    return state.playlist[state.currentIndex] || {}
  }
}
// 定义mutations，对state修改的逻辑
const mutations = {
  setSinger (state, singer) {
    state.singer = singer
  },
  setPlaying (state, flag) {
    state.playing = flag
  },
  setfullScreen (state, flag) {
    state.fullscreen = flag
  },
  setPlaylist (state, list) {
    state.playlist = list
  },
  setSequenceList (state, list) {
    state.sequenceList = list
  },
  setPlayMode (state, mode) {
    state.mode = mode
  },
  setCurrentIndex (state, index) {
    state.currentIndex = index
  }
}
const actions = {
  // 选中一个音乐之后触发的变化,这是根据我们的需求，点击歌曲触发的数据改变来定义的。
  selectPlay ({commit, state}, {list, index}) {
    commit('setfullScreen', true)
    commit('setPlaying', true)
    commit('setPlaylist', list)
    commit('setSequenceList', list)
    commit('setCurrentIndex', index)
  }
}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

2.在store/index.js中创建store

import Vue from 'vue'
import Vuex from 'vuex'
import musicplayer from './modules/musicplayer'
import 'es6-promise/auto'
import createLogger from 'vuex/dist/logger'
Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  modules: {
    musicplayer
  },
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

3.在main.js中添加store

import store from './store'
fastclick.attach(document.body)

Vue.config.productionTip = false

Vue.use(VueLazyLoad, {
  loading: require('./assets/images/music_logo.png')
})

Vue.use(IScrollView, IScroll)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App)
})

4.在singer_detail.vue中，触发action

music-list组件向外emit了一个selectMusic方法，
只要选中了一个歌曲，就触发vue中更新状态

<music-list @selectMusic="_selectMusicFn" v-bind:list="list" @loadmore="_loadFn" v-bind:hasMore="hasMore"></music-list>

 // 触发vue事件
    _selectMusicFn (item, index) {
      this.selectPlay({
        list: this.list,
        index: index
      })
    },
    ...mapActions('musicplayer', [
      'selectPlay'
    ])

5.创建一个全屏的播放组建

他的显示是依据vue中的状态值

<template>
  <transition name="playertrs">
    <div class="player" v-show="playlist.length">
      <div class="normal-player" v-show="fullscreen">
        播放组件
      </div>
      <div class="mini-player" v-show="!fullscreen"></div>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
// 从vuex中取东西
import {mapGetters} from 'vuex'
export default {
  computed: {
    ...mapGetters('musicplayer', {
      fullscreen: 'fullscreen',
      playlist: 'playlist'
    })
  }
}

</script>

<style>
  .player{
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: orange;
    z-index: 3;
  }
  .playertrs-enter-active, .slide-leave-active {
    transition: all .3s;
  }

  .playertrs-enter, .slide-leave-to /* .fade-leave-active below version 2.1.8 */
  {
    transform: translate3d(100%, 0, 0);
  }

</style>

在app.vue中添加组件

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

这个音乐播放器其实是在歌手页面上面附加的一层，这里安装了vue的dev tool插件可以看到state的变化。