在vue中使用mixin提高可复用性

一、mixin(混入)的概念

mixin是一个可以包含任意组件选项的对象

export const mixin = {
  mounted() {
    this.handlePlayList()
  },
  methods: {
    handlePlayList() {
      throw new Error('component must implement handlePlayList method')
    }
  }
}

当组件使用混入对象时，对象中的选项将被“混合”进入组件本身的选项

也就是说，mixin对象内的各种钩子将会与组件本身的钩子进行合并

如果数据对象使用了相同的名字，则会以组件本身的数据优先
另外，混入对象的钩子将在组件自身钩子之前调用
更详细的用法请参考官方文档

二、具体使用示例

在一个音乐播放网站的开发过程中，遇到这么一个问题：
当用户开始播放音乐、且退出全屏播放后，在窗口底部将会有一个固定高度的迷你播放器
此时我们就需要对其他使用了better-scroll插件的页面进行调整
让列表能滚动到最后一项（否则会被迷你播放器遮挡住）

解决思路是这样的：
1、定义一个可复用的mixin对象
2、在mixin对象中定义相关钩子，要求组件本身必须实现一个handlePlayListMixin方法
3、在handlePlayListMixin方法中，设置列表距离页面底部的距离，并调用better-scroll的refresh方法（重新计算滚动数据）

三、代码实现

首先定义mixin对象

import {mapGetters} from 'vuex'
export const playListMixin = {
  computed: {
    ...mapGetters([
      'playList' //当前播放的歌曲列表
    ])
  },
  mounted() {
    this.handlePlayList(this.playList)
  },
  activated() {
    this.handlePlayList(this.playList)
  },
  watch: {
    playList(newVal) {
      this.handlePlayList(newVal)
    }
  },
  methods: {
    handlePlayList() {
      throw new Error('component must implement handlePlayList method')
    }
  }
}

在组件中引入并注册mixin
并实现handlePlayListMixin方法（去覆盖mixin中的方法）

import { playListMixin } from 'xxx'
export default {
  name: 'xxx',
  mixins: [ playListMixin ],
  methods: {
    handlePlayListMixin (playList) {
      const bottomVal = playList.length > 0 ? '60px' : 0
      this.$refs.list.style.bottom = bottomVal
      this.$refs.list.refresh()
    }
  }
}

ref=list 的引用是添加在已经封装好的scroll组件上的

若当前播放的歌曲列表不为空（即用户正在播放音乐）
那么混入了mixin对象的组件就会在mounted、activated(主要针对使用了keep-alive的组件)等钩子中，调用handlePlayListMixin方法
从而调整列表距离页面顶部的距离，并令better-scroll重新计算滚动距离