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使用