vue中mixin的使用场景

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

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

　　组件中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//testComponent.vue

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 += n12;
  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.KaTeX parse error: Expected 'EOF', got '}' at position 66: … }); }̲, showM…notify({
message: msg,
type: type
})
}
}
}
　　在需要用到的地方就可以引入，也可以一次性在main.js中注入，代码如下：

//main.js
import Vue from ‘vue’;
import mixin from ‘mixins/mixin’;
Vue.mixin(mixin)
　　到此，就可以在组件中直接通过this使用