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中更新状态

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

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

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

在app.vue中添加组件

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