项目名称：vue-fds_music

项目作者：符道胜

开源许可协议：Apache-2.0

项目地址：https://gitee.com/fudaosheng/vue-fds_music

项目简介

Vue 高仿热门音乐播放器，基本实现所有音乐相关功能。

本项目前端均是作者独立自主开发，所用技术栈：Vue全家桶+better-scroll+axios。

后端接口来源及 API 安装可前往项目主页查看具体文档。

项目知识点：Mixin

项目优点

个人觉得本项目最大的优点在于如何触发音乐播放器。一般触发音乐播放器有三种方法：emit、vuex、bus。

1.$emit

缺点：音乐播放器和要播放的音乐所在组件必须有父子关系，而明显在一个音乐app中这是不现实的。

2.vuex

利用vuex的话可以先将要播放的音乐放在vuex中(假设放在state的musiclist中)，然后在音乐播放器组件生命周期函数中监听musiclist的状态，当音乐列表不为空时播放音乐。

缺点:

1.会存在musiclist不为空但是监听到的是空的现象,个人感觉是页面渲染先后问题。

2.修改musiclist都要通过mutations比较麻烦。

3.bus

本项目采用的就是bus。使用$bus这样不论音乐播放器和要播放的音乐所在组件是何种关系，都可以监听到要播放的音乐。

项目目录介绍

项目效果图

本项目核心：如何播放音乐

之所以将其放在mixin中，是因为这样在任何一个页面都能使用这个方法，降低了代码的重复性。

import 

在音乐播放器组件中接收时：

mounted

项目目前仍在持续开发中，作者也发现了一些开发过程中的问题，比如说目前遇到的歌手详情页面刷新没有数据。

问题原因 ：路由跳转的时候我传入的是一个歌手信息对象，歌手详情的数据都是根据这个对象的信息，id获取的。

enterArtistDetail

如果你有解决这个问题的思路，欢迎你点击后面的链接前往项目主页提出 PR，作者也会很乐意与和他一样的 Vue 爱好者们交流：https://gitee.com/fudaosheng/vue-fds_music