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 ? '循环播放' : '随机播放'
    }
  },