vue中Mixin的用法

最近接手一个项目，发现页面有个引入的js方法作为判断依据，如下(主要是这个mix这块和这个this.isLogin() )，后来研究了一下，是属于vue中的Mixin。
import mix from ‘@/mixins/index.js’;
export default {
mixins: [mix],
onShow() {
if (this.isLogin()) {
this.selectMobileBanner();
}
},
methods:{
async selectMobileBanner() {
const { data } = await selectMobileBanner();
this.bannerList = data;
this.bannerList.forEach(item => {
item.imgUrl = locals + ‘/api/portal’ + item.imgUrl;
});
// console.log(this.bannerList)
}
}
}
@/mixins/index.js 内容
var obj = {
methods: {
// 登录拦截
isLogin() {
var token = uni.getStorageSync(“token”);
if (!token) {
uni.reLaunch({
url: ‘/pages/login/login’
})
return false
} else {
return true;
}
}
}
}
export default obj

官方说法：Mixin 是一种为 Vue 组件分发可重用功能的灵活方式。mixin 对象可以包含任何组件选项。当组件使用 mixin 时，mixin 中的所有选项都会“混合”到组件自己的选项中。

简单研究后，发现可以把它当做定义公共变量和方法的地方，且在不同页面使用，声明的值都是独立的。如上面代码例子，isLogin是Mixin的方法，则我每个页面都可以引入Mixin,然后进行这个方法的使用。

个人记录。