痛点：当我们的项目越来越庞大，项目中的某些组件之间可能会存在一些相似的功能，这就导致了在各个组件中需要编写功能相同的代码段，重复地定义这些相同的属性和方法，导致代码地冗余，还不利于后期代码的维护。
mixins（混入），官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式，mixins 是一个 js 对象，它可以包含我们组件中 script 项中的任意功能选项，如：data、components、methods、created、computed 等等。我们只要将公用的功能以对象的方式传入 mixins 选项中，当组件使用 mixins 对象时所有 mixins 对象的选项都将被混入该组件本身的选项中来，这样就可以提高代码的重用性，并易于后期的代码维护。
需求：购物app有的页面游客可以访问，有的页面需要登录才可以访问，需要判断用户是否登录，没有登录提示去登陆，已登录的话，就啥也不敢，直接放行。这样的代码往往复用性很强。
应用：
loginConfirm .js:
export default {// 此处编写的就是 Vue组件实例的 配置项，通过一定语法，可以直接混入到组件内部// data methods computed 生命周期函数 ...// 注意点：// 1. 如果此处 和 组件内，提供了同名的 data 或 methods， 则组件内优先级更高// 2. 如果编写了生命周期函数，则mixins中的生命周期函数 和 页面的生命周期函数，// 会用数组管理，统一执行created () {// console.log('嘎嘎')},data () {return {title: '标题'}},methods: {sayHi () {// console.log('你好')},// 根据登录状态，判断是否需要显示登录确认框// 1. 如果未登录 => 显示确认框 返回 true// 2. 如果已登录 => 啥也不干 返回 falseloginConfirm () {// 判断 token 是否存在if (!this.$store.getters.token) {// 弹确认框this.$dialog.confirm({title: '温馨提示',message: '此时需要先登录才能继续操作哦',confirmButtonText: '去登陆',cancelButtonText: '再逛逛'}).then(() => {this.$router.replace({path: '/login',query: {backUrl: this.$route.fullPath}})}).catch(() => {})return true}return false}}
}
import loginConfirm from '@/mixins/loginConfirm'mixins属性和name、data同级。
name: 'paymentIndex',mixins: [loginConfirm],在添加购物车的时候：
async addCart () {if (this.loginConfirm()) {return}// 省略部分逻辑代码this.$toast('加入购物车成功')},
