vue2中minix的使用

使用场景

在写项目时候发现很多页面中都会用到很多重复的变量，每一个页面都会在发送请求时候将请求结果放在比如xxxxList中，或者分页请求都使用的limit和page，uesrName等等。还有公用的一些计算方法，年月日方法。就想到了vue2中的minix--混入

使用方法

一、创建minixs项目与自定义js文件

 二、js文件内容

混入对象可以包含任意组件选项。
当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
钩子函数合并同名钩子函数将混合为一个数组，因此都将被调用。
另外，混入对象的钩子函数将在组件自身钩子函数之前调用
 

export const Mixins = {
  data() {
    return {
      age: undefined,
      idcard:undefined,
      phone:undefined,
      name:'jack',
      num1:1,
      num2:undefined
    }
  },
  methods: {
    getAge1() {
      this.age=18
      console.log("age1 =", this.age )
    },
    getAge2() {
      console.log("age2=", this.age )
    },
  }
}

三、使用

数据对象合并
    数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先（组件的data中变量会覆盖混入对象的data中变量）

<template>
  <div class='box'>
    <h1>2222222222</h1>
    <p>姓名 {{ name }}</p>
    <p>年龄 {{ age }}</p>
    <p>手机 {{ phone || 12345 }}</p>
    <p>数字 {{ num1 || 9999 }}</p> <button @click="getnum">+++++</button>
  </div>
</template>
<script>
import {Mixins} from "../minixs/testminix"
export default {
  mixins:[Mixins],
  data() {
    return {
      num1:18,
    };
  },
  mounted() {
    this.getAge1()
  },
  computed: {},
  watch: {},
 // 组件方法
  methods: {
    // 获取num1
    getnum(){
      this.num1++
    }
  },
};
</script>