在vue2项目中,如果多个组件中需要复用相同的逻辑(如:数据、方法、生命周期钩子等)时,可以使用mixins实现逻辑复用。
一、在根目录src文件夹下创建mixins文件夹,用于存放复用逻辑函数。
二、然后封装好了用于复用的逻辑函数时,再到要使用该逻辑功能的组件中去引入。
eg:验证是否登录的功能逻辑,一般都是被多个组件复用的,因此可以把验证用户是否登录的逻辑封装成一个mixins函数。
mixins/loginConfirm.js:
php
export default {
methods: {
// 是否需要弹登录确认框
// (1) 需要,返回 true,并直接弹出登录确认框
// (2) 不需要,返回 false
loginConfirm () {
if (!this.$store.getters.token) {
this.$dialog.confirm({
title: '温馨提示',
message: '此时需要先登录才能继续操作哦',
confirmButtonText: '去登陆',
cancelButtonText: '再逛逛'
})
.then(() => {
// 如果希望,跳转到登录 => 登录后能回跳回来,需要在跳转去携带参数 (当前的路径地址)
// this.$route.fullPath (会包含查询参数)
this.$router.replace({
path: '/login',
query: {
backUrl: this.$route.fullPath
}
})
})
.catch(() => {})
return true
}
return false
}
}
}
由于一般是通过vuex分模块去管理组件中用到的数据,因此,登陆后的用户数据往往是利用store/modules/user.js模块去管理登录数据。
然后为了方便其他组件中也可以访问到用户的登录数据,可以把该数据引入到store/index.js文件中,便于共享数据。
php
import user from '@/store/modules/user'
export default new Vuex.Store({
state: {
},
getters: {
// 配置全局的token
token (state) {
return state.user.userInfo.token
}
},
mutations: {
},
actions: {
},
modules: {
user
}
})
所以在mixins/loginConfirm.js中获取token数据,直接通过 this.$store.getters.token即可。
在vue3项目中是通过自定义封装hook函数来实现逻辑复用的。