在项目中,很多时候同样的逻辑可能在不同的地方使用,比如我从后台获取某列表时,需要根据登录用户的角色的不同,调用不同的接口,从不同的数据库表中获取对应数据。而这个逻辑,在许多页面中都需要用到,不同的页面,使用的控件可能不一样,所以,无法做成通用的组件,此时,就需要将这部分逻辑抽取出来,写成公用的方法,在不同的页面,都调用这同一个方法来获取数据,这就要用到mixin。我的理解,就是公用的utility函数。
1、定义一个mixin
不限于公用的逻辑方法,其中可以包含任何需要抽取的公共内容:
export const MyOwnMixin={
data(){
return {
}
},
computed: {
},
watch: {
},
methods: {
myFunc(){
//处理公用逻辑
}
},
}
2、在Vue组件中使用mixin
import {MyOwnMixin} from "@/mixins/MyOwnMixin";
export default {
mixins: [MyOwnMixin],
mounted() {
// 调用mixin中的myFunc函数
this.myFunc();
}
如果不涉及异步问题,到这里,这个公用方法就已经抽取出来了。但是,如果涉及后台接口,在调用myfunc时,需注意异步问题,例如: