mixin混入知识点

一、Vuex、mixin的区别：

1.Vuex是状态共享管理，Vuex中的所有变量和方法都是可以读取和更改并相互影响的；

2.mixin可以定义公用的变量或方法，但是mixin中的数据是不共享的，也就是每个组件中的mixin实 例都是不一样的，都是单独存在的个体，不存在相互影响的；

二、mixin与公共组件的区别：

1.组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据 props来传值，但本质上两者是相对独立的；

2.Mixin：是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方 法，可以理解为形成了一个新的组件；

三、mixin用法：

1.全局混入：

步骤一：在src目录下新建mixin文件夹，写入要全局混入的文件；

步骤二：在main.js文件中引入；

2.局部混入：

步骤一：定义一个mixin混入对象；

步骤二：把定义好的mixin对象混入当前组件中；

四、mixin合并使用规则

1.mixin混入对象值为函数的同名函数选项将会进行递归合并为数组，两个函数都会执行，只不过 先执行mixin中的同名函数；

       

2.mixin混入对象值为对象的同名对象将会进行替换，都优先执行组件内的同名对象，也就是组件 内的同名对象将mixin混入对象的同名对象进行覆盖；

3.mixin混入对象的数据在和组件的数据发生冲突时以组件数据优先（组件的data中变量会覆盖混入对象的data中变量）

五、mixin使用场景

举个例子：我们有一对不同的组件，它们的作用是切换一个状态布尔值，一个模态框和一个提示                      框。这些提示框和模态框除了在功能上，没有其他共同点：它们看起来不一样，用法                      不一样，但是逻辑一样。

// 模态框
const Modal = {
  template: '#modal',
  data() {
    return {
      isShowing: false
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  },
  components: {
    appChild: Child
  }
}

// 提示框
const Tooltip = {
  template: '#tooltip',
  data() {
    return {
      isShowing: false
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  },
  components: {
    appChild: Child
  }
}

解决办法如下：

1.局部写法：

const toggle = {
    data () {
        isshowing: false
    },
    methods: {
        toggleShow() {
            this.isshowing = !this.isshowing
        }
    }
}

// 下面即可使用了
// mixins: [变量名]

const Modal = {
  template: '#modal',
  mixins: [toggle],
  components: {
    appChild: Child
  }
};

const Tooltip = {
  template: '#tooltip',
  mixins: [toggle],
  components: {
    appChild: Child
  }
};

2.全局写法：

// mixin.js

export const toggle = {
    data () {
        isshowing: false
    },
    methods: {
        toggleShow() {
            this.isshowing = !this.isshowing
        }
    }
}

// modal.vue
// 将mixin引入该组件，就可以直接使用 toggleShow() 了
import {mixin} from '../mixin.js'

export default {
    mixins: [mixin],
    mounted () {
        
    }
}
// tooltip组件同上