vue mixins 混入

1、mixins 含义
mixins 就是混入,就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改，mixins 是一种分发Vue组件中可复用功能的非常灵活的一种方式。
一个混入对象可以包含任意组件选项。比如组件的生命周期，data() { return{} }，methods 方法等，凡事能在组件上编写的都能在 mixins 中定义。

2、什么时候使用Mixins
页面的风格样式不同，但是执行的方法和需要的数据类似，这时候我们就可以把公共的方法提出来，然后在混入需要用到的组件里面，直接调用。相同的方法写一遍即可。

3、示例
在 src/components/mixin 文件夹下创建对应的 common.js 文件

export const test1 ={
  data: () => ({
  }),
  mounted(){
  },
  methods: {
  }
}
 
export const test2 ={
  data: () => ({
  }),
}

在组件中引入这个 mixins 对象，通过 mixins:[xxx]，使用 mixins 对象可以混入多个 mixins 对象

import { test1, test2 } from "../components/mixin/common"
export default {
  name: 'main',
  //混入跟组件有同一个生命周期，混入对象会比组件的先执行
  mixins:[test1, test2],   //混入的对象中谁在前面就先调用谁，如audioUrl=>test1=>test2
  data: () => ({
  }),
}

引入 mixins 之后，即可以像调用 data 那样调用混入的方法或变量。

4.mixins与vuex的区别

mixins是单独的数据、方法共享，即每个引入的组件里面关于它的数据和方法都是独立的，更改某一个组件的mixins数据，其他的组件里面跟引入的这个mixins相同的数据并没有变化。
vuex是数据共享，即更改一个地方的数据，其他组件的数据一起变更了。