vue慕課網音樂項目手記：57-播放控件的播放模式的實現

因爲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 ? '循環播放' : '隨機播放'
    }
  },