vue高级特性：mixin

一：混入 mixin （抽离公共逻辑）

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。把各种公共用的方法等封装在混入文件中，在不同的组件中有相同的操作方法时可以单独提取出来，放到单独的文件中，在使用的组件中注入即可。以此实现vue组件中的可复用功能。

特点：可以定义共用的变量，（写在data函数中）在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响

定义混入js:

// 里面的定义方式与组件export default 中写法相同
let mixin = {
  data (){
    return {
      activityId: null,
      userObj: {
        1: '非会员老客',
        2: '非会员新客',
        3: '会员老客',
        4: '会员新客'
      }
    }
  },
  mounted () {
    this.activityId = this.$route.query.activityId
    console.log('mixin', this.activityId)
  },
  methods: {
    getDateString (timeTemp) {
      var now = new Date(timeTemp)
      var year = now.getFullYear();
      var month = now.getMonth()+1; 
      var date = now.getDate(); 
      var hour = now.getHours(); 
      var minute = now.getMinutes(); 
      var second = now.getSeconds(); 
      return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 
    },
    getUserType(type) {
      return this.userObj[type]
    }
  }
}

export default mixin

在Home组件中引入mixin:

<template>
  <div class="hello">
    {{ getUserType(1) }}
    {{ getDateString(1595140245985) }}
  </div>
</template>

<script>
// 引入文件
import mixinPage from '../mixin/index'
export default {
  mixins: [mixinPage] // 定义
}
</script>

<style scoped>

</style>

上面是在单个组件中引入

下面是全局引入

在main.js 中加入

import mixPage from './mixPage.js'
Vue.mixin(mixPage)

组件里直接调用： 

<template>
  <div class="hello">
    {{ getUserType(1) }}
    {{ getDateString(1595140245985) }}
  </div>
</template>

<script>
export default {
}
</script>

<style scoped>

</style>

 OVER~

问题：

1. 方法、变量如果在组件内找不到定义，如果组件引入mixin，要去mixin中找

2. 组件引入mixin中的data，可能出现mixin data中变量名与组件data中变量名冲突情况