vue-music（19）mixin的使用及di底部scroll刷新的实现

当多个组件都用到共同的一些js代码时候，可以吧这些代码抽象出来，放在mixin中，用到的时候引用

export const playlistMixin = {
  computed: {
    ...mapGetters([
      'playList'
    ])
  },
  mounted () { // 渲染完毕后触发
    this.handlePlayList(this.playList)
  },
  activated () { // keep-alive 切换的时候 触发
    this.handlePlayList(this.playList)
  },
  watch: {
    playList (newList) {
      this.handlePlayList(newList)
    }
  }
}

在组件引用

import {playlistMixin } from 'xxx.js'

export default {
    mixins:[playlistMixin]
    //之后再写需要的方法替换mixin中的共有方法
    handlePlayList (playList) {
      const bottom = this.playList.length > 0 ? '60px' : 0 // 当存在破防徐建时候，组件的bottom为60px
      this.$refs.shortcutWrapper.style.bottom = bottom
      this.$refs.shortcut.refresh() // 调用scrool内部接口刷新
      this.$refs.searchResult.style.bottom = bottom
      this.$refs.suggest.refresh()
    },

当scroll包含两部分，而且两部分都是通过一部获取的，要等二者全部加载完毕后再刷新
可以将两部分合并成一个数组：

<scroll class="shortcut" :data="shortcut" ref="shortcut">

。。。
shortcut () {
      return this.hotKey.concat(this.searchHistory)
      // 当hotKey和History有一个发生变化的时候。computed就会重新计算。
    }