痛点：当我们的项目越来越庞大，项目中的某些组件之间可能会存在一些相似的功能，这就导致了在各个组件中需要编写功能相同的代码段，重复地定义这些相同的属性和方法，导致代码地冗余，还不利于后期代码的维护。
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. 如果已登录 => 啥也不干 返回 false
loginConfirm () {
// 判断 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('加入购物车成功')
},
