Vue+Vuex+Element-ui实现歌曲播放控件、播放列表功能

写在前面：

根据思路写代码和写文章的区别还是挺大的，后者更多需要的是一个总结表述的能力，以及需要判断文章中呈现的东西是否有价值。做笔记和写博客同样是在记录，而博客还承担了一个供别人浏览的职能，所以如何把自己的逻辑表达得让大众都能理解，也是一个值得研究的地方。
由于个人技术的影响，文章中可能会出现一些错误，小到格式排版，大到逻辑错误都正常，所以写博客的原因主要是：

1. 帮助重新梳理自己的逻辑，记录自己的学习过程
2. 希望能与更多伙伴进行技术上的交流，如果还能大佬指出问题或提一些建议，那就是赚到
3. 如果还能帮到一些可能会遇到此类问题的小伙伴，那也是极好的

废话有点多，开始进入主题叭

——————（平平无奇的分割线） ——————

这一篇主要更新的是播放控制组件，以及播放列表这部分的实现，因为还涉及到组件之间的一些通信，所以在这之前可以先看一下我的上一篇博客：

VUE获取网易云音乐接口，并实现歌词滚动效果

两篇结合起来可以实现一个简单但是基本功能都完善的音乐播放器功能了

这里可以直接移步 GitHub，轻轻点个Star，开心你我他！skr~
项目演示 请在PC端查看噢！

再次进入主题。。。

——————（平平无奇的分割线） ——————

播放控制组件

同样的，先上一下效果图

可以看到这里主要分为两个部分，一个是放置歌曲进度条、控制歌曲播放顺序等，一个就是当前播放列表了。

1、引入vuex

在这之前，我们先来看看我们的store里需要管理的内容。

刚刚已经说过，播放控制组件与歌曲信息组件是需要数据的交互的，如

所以我们创建一个store来对它们需要同步的信息进行管理，我们在项目的src文件夹下新建一个vuex文件夹，并在里面新建个store.js文件，我们之后就在这个文件里写状态管理的代码了。

1. 下载vuex ： npm install vuex --save
2. 在store.js里添加下面内容，刚入门的小伙伴可以和我一样使用下面这个模板，这样的格式看起来会比较清晰。

这里推荐一个文章 Vue.js——十分钟入门Vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
   
}
const getters = {
   
}
const mutations = {
   
}
const actions = {
   
}
export default new Vuex.Store({
   
    state,
    getters,
    mutations,
    actions
})

我们这里主要用到的属性就state和mutations。

state就是Vuex中的公共的状态, 相当于我们组件里的data属性，用于保存所有组件的公共数据，下面就来看看我们需要的公共数据

const state = {
   
    playList: [], //播放列表
    playContent: {
   },   //当前播放的歌曲信息
    current: ""  //当前歌曲的播放进度
}

• 播放列表：在歌曲列表中点击播放或者添加时，就更新播放列表，而播放控制部分的循环模式也是需要通过播放列表来实现的
• 播放信息：不管是在歌词页面还是播放控制组件上都需要进行展示
• 播放进度：控制歌词滚动以及播放进度条的更新

接下来我们需要用到mutaions属性，它相当于我们组件中的methods，当我们在这里可以处理组件提交的事件，然后对state的值进行一个更新修改。

const mutations = {
   
    //获取当前播放歌曲的信息
    setContent(state, payload) {
   
        state.playContent = payload
        state.playList.indexOf(payload)==-1?state.playList.push(payload):""
    },
    //获取当前播放歌曲的歌词
    setLyric(state, payload) {
   
        state.playContent.lyric = payload
    },
    //设置当前播放歌曲的进度
    setCurrent(state, payload) {
   
        state.current =  Math.ceil(payload)
    },
    //从播放列表中移除歌曲
    removeSong(state, payload) {
   
        let index = state.playList.indexOf(payload)
        state.playList.splice(index, 1)
    }