混入mixins

具体合并策略：

• mixins中的data会合并到data中，有冲突的话，data中数据覆盖mixins中的数据
• mixins中的钩子函数也会执行，先执行mixins中的钩子函数
• methods、components 和 directives会执行，但有冲突时，原methods、components 和 directives会覆盖mixins中的methods、components 和 directives

如何使用

在src目录下，新建一个mixins文件，然后在文件下新建一个common.js

// 目录结构：src/mixins/common.js
// 可以在mixins中写生命周期，定义函数等等
export default {
  data () {
    return {
      mixins: '水务系统',
      id: 1
    }
  },
  created () {
    console.log('这个是mixins的created')
  },
  mounted () {
    console.log('这个是mixins的mounted')
  },
  methods: {
    update () {
      console.log('update-methods')
    },
    created () {
      console.log('created-methods')
    },
  }
}

// 使用
<template>
	<div></div>
</template>
<script>
import Mixins from "@/mixins/common
export default {
	mixins: [Mixins]
	data () {
		return {}
	},
	mounted () {
		// 使用mixins中的数据或者是方法
		console.log(this.$data.mixins) // 水务系统
		console.log(this.$data.id) // 1
		this.update() // update-methods
		this.created() // created-methods
	}
}
</script>

区别

• mixins和vuex的区别
  ----vuex公共状态管理，在一个组件被引入后，如果该组件改变了vuex里面的数据状态，其他引入vuex数据的组件也会对应修改，所有的vue组件应用的都是同一份vuex数据。（在js中，有点类似于浅拷贝）
  vue引入mixins数据，mixins数据或方法，在每一个组件中都是独立的，互不干扰的，都属于vue组件自身。（在js中，有点类似于深度拷贝）
• mixins和公共组件的区别
  ----vuex公共状态管理，在一个组件被引入后，如果该组件改变了vuex里面的数据状态，其他引入vuex数据的组件也会对应修改，所有的vue组件应用的都是同一份vuex数据。（在js中，有点类似于浅拷贝）
  vue引入mixins数据，mixins数据或方法，在每一个组件中都是独立的，互不干扰的，都属于vue组件自身。（在js中，有点类似于深度拷贝）

使用场景

• 如果只是提取公用的数据或者通用的方法，并且这些数据或者方法，不需要组件间进行维护，就可以使用mixins。（类似于js中封装的一些公用的方法）