共计 2388 个字符，预计需要花费 6 分钟才能阅读完成。
项目名称：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 {\_getMusicUrl, \_getLyric} from "network/detail"
import {playList} from "components/content/playmusic/playList";
export const indexMixin = {
methods: {PlayMusic(index = 0) {
let path = this.$route.path;
let musiclist;
if (this.musiclist.length >= 200) {musiclist = this.musiclist.slice(0, 199);
}
else musiclist = this.musiclist;
let url = null,
lyric = null,
currentLength = 0;
let playlist = \[\];
for (let i = 0, length = musiclist.length; i < length; i++) {let getUrl = \_getMusicUrl(musiclist\[i\].id).then(res => {url = res.data.data\[0\].url;
return url;
});
let getLyric = \_getLyric(musiclist\[i\].id).then(res => {
lyric = res.data.tlyric.lyric;
return lyric;
});
Promise.all(\[getUrl, getLyric\])
.then(results => {let song = new playList(i, musiclist\[i\], results\[0\], results\[1\]);
playlist.push(song);
currentLength++;
/\*\* 每次实现两个网络申请都判断是否满足要求，满足才发送事件 \*/
if (i == musiclist.length - 1) {this.$bus.$emit("playMusic", playlist, index, path);
}
})
.catch(err => {this.$Message.warning('数据加载中，请稍等');
});
}
},
}在音乐播放器组件中接管时：
mounted() {
/\*\*list 是音乐列表，index 是要播放的音乐在列表中的地位，path 是以后播放音乐的路由门路 \*/
this.$bus.$on("playMusic", (list, index, path) => {this.music = \[\];
this.path = path;
this.music = list;
// this.music = list.filter(item => {
// return item.src !== "";
// });
/\*\* 对数组进行排序 \*/
this.music = this.music.sort((a, b) => {return a.index - b.index;});
/\*\* 在申请歌曲的时候可能有的歌曲不可用，或失落。导致在播放器中的歌曲列表和页面展现存在差别，可能会呈现指定的播放歌曲不服
\* 用一次查找解决问题
\*/
for (let i in this.music) {if (this.music\[i\].index == index) {
this.currentIndex = i;
break; //break 跳出循环 ------continue 跳出本次循环
}
}
});
},我的项目目前仍在继续开发中，作者也发现了一些开发过程中的问题，比如说目前遇到的 歌手详情页面刷新没有数据。
问题起因：路由跳转的时候我传入的是一个歌手信息对象，歌手详情的数据都是依据这个对象的信息，id 获取的。
enterArtistDetail(artist) {
this.$router.push({
path: "/artist",
query: {artist: artist}
});
this.$store.commit('addArtist',artist);
}如果你有解决这个问题的思路，欢送你点击前面的链接返回我的项目主页提出 PR，作者也会很乐意与和他一样的 Vue 爱好者们交换：https://gitee.com/fudaosheng/vue-fds_music
