Vue之混入的重要性

对于Java后端来说继承是必不可少的，对于Vue来说混入就像继承不可或缺。但是很多人都不喜欢或者很少用混入，那么今天就来谈谈Vue混入的重要性。

1. 通用组件混合

想必大家都创建过公用组件，对于一些组件来说，往往都存在共通性，如选择器，我们可以将选择器通用的参数、方法等单独提取

/**
 * 下拉选择器混入
 */
export default {
  model: {
    event: 'input-change', // 这个事件与下面的emit事件与之对应
    prop: 'value' //
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    /**
     * 监听值改变，回调change
     */
    listenValue: Boolean
  },
  data() {
    return {
      val: this.value,
      loading: false,
      options: []
    }
  },
  watch: {
    value: {
      handler(n) {
        this.val = n;
        if (this.listenValue) {
          this.toChange(n);
        }
      }
    }
  },
  methods: {
    onChange(value) {
      this.$emit('input-change', value);
      if (!this.listenValue) {
        this.toChange(value);
      }
    },
    toChange(value) {
      if (this.dataKey && this.options) {
        const data = this.options.find(item => String(item[this.dataKey]) === value);
        this.$emit('change', data);
      }
    }
  }
}

然后一个选择器组件就能轻而易举的实现：

<template>
  <el-select
    v-model="val"
    filterable
    remote
    placeholder="请输入关键词"
    :remote-method="remoteMethod"
    :loading="loading"
    @change="onChange"
    v-bind="$attrs">
    <el-option
      v-for="item in options"
      :key="item.deviceTypeId"
      :label="item.name"
      :value="item.deviceTypeId">
    el-option>
  el-select>
template>

<script>
import {listByKeyWord} from "@/api/bayonet/device_type";
import selectMixin from "@/components/Selector/selectMixin";

export default {
  name: "DeviceTypeSelect",
  mixins: [selectMixin],
  methods: {
    remoteMethod(query) {
      this.loading = true;
      listByKeyWord({
        searchValue: query
      }).then(res => {
        this.options = res.data;
        this.loading = false;
      });
    }
  },
  created() {
    listByKeyWord('').then(res => {
      this.options = res.data;
    });
  }
}
script>

2. 可选择性混入

对于页面，可能仅有一小部分需要某项功能，那么我们就可以将这些功能封装，做成混入，在有必要时引入混入，如：

import {mapState} from "vuex";

export default {
  data() {
    return {
      roleMap: {
        /**
         * 超管
         */
        admin: 'admin',
        /**
         *服务中心
         */
        fuwuzhongxin: 'fuwuzhongxin',
        /**
         *企业
         */
        enterprise: 'enterprise',
        /**
         *应急办
         */
        yingjiban: 'yingjiban',
        /**
         *审批管理部
         */
        shenpi: 'shenpi',
        /**
         *企业用户
         */
        enterprise_user: 'enterprise_user',
        /**
         * 司机用户
         */
        driver: 'driver'
      }
    }
  },
  computed: {
    ...mapState({
      user: state => state.user,
    }),
    /**
     * 当前用户是否为管理员
     * @returns {*|boolean}
     */
    isAdmin() {
      return this.user.userInfo.admin || false;
    },
    /**
     * 当前用户是否为企业
     * @returns {boolean}
     */
    isEnterprise() {
      if (!this.user || !this.user.roles) {
        return false;
      }
      return this.user.roles.includes(this.roleMap.enterprise) || this.user.roles.includes(this.roleMap.enterprise_user) || false;
    },
    /**
     * 当前用户是否为服务中心
     * @returns {boolean}
     */
    isFuwuzhongxin() {
      if (!this.user || !this.user.roles) {
        return false;
      }
      return this.user.roles.includes(this.roleMap.fuwuzhongxin) || false;
    },
  },
  methods: {
    /**
     * 判断当前用户是否某一角色
     * @param roleCode 角色编码
     * @returns {boolean}
     */
    isRole(roleCode) {
      if (!this.user || !this.user.roles) {
        return false;
      }
      return this.user.roles.includes(roleCode) || false;
    },
    /**
     * 判断当前用户包含某一角色
     * @param roleCodes 角色列表
     * @returns {boolean}
     */
    isAnyRole(...roleCodes) {
      if (!this.user || !this.user.roles) {
        return false;
      }
      return roleCodes.some(roleCode => this.user.roles.includes(roleCode));
    },
    /**
     * 判断当前用户包含所有角色
     * @param roleCodes 角色列表
     * @returns {boolean}
     */
    isEveryRole(...roleCodes) {
      if (!this.user || !this.user.roles) {
        return false;
      }
      return roleCodes.every(roleCode => this.user.roles.includes(roleCode));
    }
  }
}

然后在需要的地方引入：

import userMixin from "@/mixins/userMixin";
export default {
  name: "Form",
  mixins: [userMixin]
}

3. 全局工具混入

对于一些比较常用的工具，我们可以使用全局混入将其添加到所有组件

export default function (Vue) {
  Vue.mixin({
    methods: {
      isExternal(path) {
        return /^(https?:|mailto:|tel:)/.test(path)
      },
      validUsername(str) {
        const valid_map = ['admin', 'editor']
        return valid_map.indexOf(str.trim()) >= 0
      },
      validURL(url) {
        const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
        return reg.test(url)
      },
      validLowerCase(str) {
        const reg = /^[a-z]+$/
        return reg.test(str)
      },
      validUpperCase(str) {
        const reg = /^[A-Z]+$/
        return reg.test(str)
      },
      validAlphabets(str) {
        const reg = /^[A-Za-z]+$/
        return reg.test(str)
      },
      validEmail(email) {
        const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
        return reg.test(email)
      },
      isString(str) {
        if (typeof str === 'string' || str instanceof String) {
          return true
        }
        return false
      },
      isArray(arg) {
        if (typeof Array.isArray === 'undefined') {
          return Object.prototype.toString.call(arg) === '[object Array]'
        }
        return Array.isArray(arg)
      }
    }
  })
}

然后再main.js中引入，然后就能再任何组件中使用这些方法了

import globalUtils from '@/mixins/globalUtils';
Vue.use(globalUtils);

总结

其实还有很多使用方式，混入具有很强的灵活性，在于自己的不断探索。
很多框架也凭借者混入实现了全局性的各种功能，混入其实能够使得代码更容易集中维护，更加灵活，简单，甚至规范。