vue中mixin的使用场景

　　在实际的vue项目开发中，往往团队成员在合作开发中会定义一些公用的组件，方法，属性，过滤器等，然后在业务组件中引入使用，对于单个引入使用，各自实现方式如下：

　　1）组件：定义单独组件，实现单独组件中的特有功能，在引用组件中通过import方式引入，在components中注册，然后使用。

//comTitle.vue
<template>
  <div class="title-common">
    <div class="title">
      <span :class="[titleSize]" v-text="title"/>
      <span class="title-sub" v-if="subTitle" v-text="subTitle"/>
    </div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  props: {
    size: {
      type: String,
      default: "normal"
    },
    //标题
    title: {
      type: String,
      required: true
    },
    //小标题说明
    subTitle: {
      type: String,
      default: ""
    }
  },
  computed: {
    titleSize() {
      return `title-${this.size}`;
    }
  }
};
</script>
<style lang="postcss" scoped>
@import url("common.postcss");
.title-common {
  display: flex;
  align-items: center;
  justify-content: space-between;
  & .title {
    display: flex;
    align-items: center;
  }
  & .title-sub {
    font-size: var(--h6);
    color: #363636;
    padding-left: 19px;
  }
  & .title > span:first-child {
    color: #000;
    border-left: 4px solid var(--primaryBlueColor);
    padding-left: 9px;
  }
  & .title-big {
    display: inline-block;
    font-size: 18px;
    line-height: 18px;
    font-weight: 700;
  }
  & .title-normal {
    font-size: var(--h3);
    line-height: var(--h3);
  }
  & .title-small {
    font-size: var(--h3);
    line-height: var(--h3);
    font-weight: 550;
  }
  & .title-mini {
    font-size: var(--h4);
    line-height: var(--h4);
    font-weight: 550;
  }
  & .title-exmini {
    font-size: var(--h6);
    line-height: var(--h6);
    font-weight: 550;
  }
}
</style>

　　组件中使用

//testComponent.vue
<template>
    <div>
        <com-title title="标题" size="small"></com-title>
    </div>
</template>
<script>
import comTitle from "components/comTitle"
export default {
    name:'testComponent',
    components:{
        comTitle
    }
}
</script>

　　

　　2）方法：创建外部函数文件，通过export对外暴露，方便组件通过import引入使用。

//date.js
//前导0
export const addZero = function(n){
    return n >= 10 ? n : '0' + n
}
//时间对象格式化
export const dateFormat = function(date){
    return date.getFullYear() + "-" + addZero(date.getMonth()+1) + "-" + addZero(date.getDate()) + " 00:00:00"; 
}
/** 
* 获得相对当前周AddWeekCount个周的起止日期 
* AddWeekCount为0代表当前周   为-1代表上一个周   为1代表下一个周以此类推
* **/ 
export const getWeekStartAndEnd = function(AddWeekCount){
    //一天的毫秒数   
    var millisecond = 1000 * 60 * 60 * 24; 
    //获取当前时间   
    var currentDate = new Date();
    //相对于当前日期AddWeekCount个周的日期
    currentDate = new Date(currentDate.getTime() + (millisecond * 7 * AddWeekCount));
    //减去的天数   
    var minusDay = currentDate.getDay(); 
    //获得当前周的第一天   
    var currentWeekFirstDay = new Date(currentDate.getTime() - (millisecond * minusDay)); 
    //获得当前周的最后一天
    var currentWeekLastDay = new Date(currentWeekFirstDay.getTime() + (millisecond * 6));
    //起止日期数组   
    var startStop = new Array();    
    startStop.push(dateFormat(currentWeekFirstDay)); 
    startStop.push(dateFormat(currentWeekLastDay)); 
    return startStop; 
}
/** 
* 获得相对当月AddMonthCount个月的起止日期 
* AddMonthCount为0 代表当月 为-1代表上一个月  为1代表下一个月 以此类推
* ***/ 
export const getMonthStartAndEnd = function(AddMonthCount) { 
    //获取当前时间   
    var currentDate = new Date();
    var month = currentDate.getMonth() + AddMonthCount;
    if(month < 0){
        var n = parseInt((-month)/12);
        month += n*12;
        currentDate.setFullYear(currentDate.getFullYear()-n);
    }
    currentDate = new Date(currentDate.setMonth(month));
    //获得当前月份0-11   
    var currentMonth = currentDate.getMonth(); 
    //获得当前年份4位年   
    var currentYear = currentDate.getFullYear(); 
    //获得上一个月的第一天   
    var currentMonthFirstDay = new Date(currentYear, currentMonth,1); 
    //获得上一月的最后一天   
    var currentMonthLastDay = new Date(currentYear, currentMonth+1, 0);  
    //起止日期数组   
    var startStop = new Array(); 
    startStop.push(dateFormat(currentMonthFirstDay)); 
    startStop.push(dateFormat(currentMonthLastDay)); 
    //返回   
    return startStop;
}

　　3）属性：通过引入状态管理机制vuex(state,getters,mutations,actions)进行状态管理

import api from './api';
export default {
    state:{  //状态对象
        name: ''
    },
    getters:{ //获取数据
        name: state => state.name 
    },
    mutations:{  //更新数据
        updateName(state,name = ''){
            state.name = name
        }
    },
    actions:{  //支持异步请求更新数据
        async getName({ commit }) {
            let { result } = await api.getName({});
            if (result) commit(updateName, result); 
        }
    }
}

　　在组件中一个个引入是一种方式，但是，倘若有些公共组件使用频率很高，使用mixin（混入）就可以很方便地引入公用部分，mixin是一个js对象文件，如下：

//mixin.js
import modal from 'common/modal'
import comButton from 'common/comButton'
import comTable from 'common/comTable'
import comTitle from "common/comTitle"
import pagination from "common/pagination"

export default {
    data(){
        return {
            comId:1,
            comName:'Jack'
        }
    },
    components: {
        comButton,
        modal,
        comTable,
        comTitle,
        pagination
    },
    filters:{
        dbTypeShowTitle(t){
            const dataBaseTypes = [
                '','DB2','Mysql','Oracle'
            ]
            return dataBaseTypes[t]
        }
    },
    methods: {
        goBack(){
            history.back()
        },
        goPath(name) {
            this.$router.push({
                name: name
            });
        },
        showMessage(msg, type = 'error') {
            this.$notify({
                message: msg,
                type: type
            })
        }
    }
}

　　在需要用到的地方就可以引入，也可以一次性在main.js中注入，代码如下：

//main.js
import Vue from 'vue';
import mixin from 'mixins/mixin';
Vue.mixin(mixin)

　　到此，就可以在组件中直接通过this使用