因为player和playlist里面有大量的js和mutation以及getters是共享的。所以通过mixin来实现js的共享
创建一个playerMixin
export const playerMixin = {
computed: {
iconMode () {
return this.mode === playMode.sequence ? 'icon-sequence' : this.mode === playMode.loop ? 'icon-loop' : 'icon-random'
},
...mapGetters([
'sequenceList',
'currentSong',
'currentIndex',
'playList',
'mode'
])
},
methods: {
modeClick () {
const mode = (this.mode + 1) % 3
this.setMode(mode)
let list = null
if (mode === playMode.random) {
list = shuffle(this.sequenceList)
} else {
list = this.sequenceList
}
this.resetCurrentSong(list)
this.setPlayList(list)
},
resetCurrentSong (list) {
let index = list.findIndex((item) => {
return item.id === this.currentSong.id
})
this.setCurrentIndex(index)
},
...mapMutations({
setCurrentIndex: 'SET_CURRENT_INDEX',
setMode: 'SET_MODE',
setPlayList: 'SET_PLAYLIST',
setPlayingState: 'SET_PLAYING_STATE'
})
}
}
然后在组件里面调用方法和属性就可以了。
<i class="icon" :class="iconMode" @click="modeClick"></i>
然后设置文本,文本是根据mode来设置的,使用computed来计算。
computed: {
modeText () {
return this.mode === playMode.sequence ? '顺序播放' : this.mode === playMode.loop ? '循环播放' : '随机播放'
}
},