网易云音乐移动端项目实战(分解中)，深入分析

import { mapState, mapMutations } from “vuex”;

export default {

computed: {

…mapState([“playlist”, “playlistindex”])

},

mounted() {

console.log(this.$refs.audio);

},

updated() {

console.log(this.playlist[this.playlistindex]);

},

methods: {

playEvent: function() {

if (this.$refs.audio.paused) {

this.$refs.audio.muted = false;

this.$refs.audio.play();

var targeticon = document.querySelector(“.right span svg use”);

targeticon.setAttribute(“xlink:href”, “#icon-pauseCircle”);

} else {

this.$refs.audio.muted = true;

this.$refs.audio.pause();

var targeticon = document.querySelector(“.right span svg use”);

targeticon.setAttribute(“xlink:href”, “#icon-bofang1”);

}

}

},

data() {

return {};

}

};

三、切换歌曲

store下的index.js

添加方法修改索引值

import { createStore } from ‘vuex’

export default createStore({

state: {

playlist:[{

id:138164304,

name:“不会再爱你了3.0”,

al:{

id:138164304,

name:“不会再爱你了3.0”,

pic:109951166868365440,

picUrl:“http://p4.music.126.net/ajXo6RG2aM8I5yYJuPmUrQ==/109951166868365438.jpg”

}}],

playlistindex:0

},

mutations: {

changeplaylist:function(state,value){

state.playlist = value;

},

setPlayindex:function(state,indexvalue){

state.playlistindex = indexvalue

}

},

actions: {//异步获取数据然后修改对应方法

},

modules: {

}

})

调用store里面的方法，修改对应的索引值

playlist.vue

播放全部

(共{ {playlist.tracks.length}}首)

+收藏({ {playlist.subscribedCount}})

{ {i+1}}

{ {item.name}}

{ {item}}

{ {item.al.name}}

只是修改了一些样式

play-controlor.vue

{ {playlist[playlistindex].al.name}}

滑动可以切换上下首哦

<svg class=“icon play” aria-hidden=“true” @click=“playEvent()”>

<audio

ref=“audio”

:src=“https://music.163.com/song/media/outer/url?id=${this.playlist[this.playlistindex].id}.mp3”

四、播放界面实现