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
{ {item}}
只是修改了一些样式
play-controlor.vue
<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
”