mixins混合使用

1.mixin与mixins的区别

mixin是全局注册的。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑,所以一般情况下不建议使用。
mixins选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说，如果你的混入包含一个 created 钩子，而创建组件本身也有一个，那么两个函数都会被调用。Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。

1.首先在src文件夹下面建一个mixins的文件夹，在里面创建一个js空白文件，代码如下;

export const getCardsInfo = {
    data(){
        return{
        }
    },
    created(){
      this.getCardsInfocom();
    },
    methods:{
        getCardsInfocom(){
            getCards()
            .then((res) => {
                if (res.data.code == 0) {
                    this.AllCards = res.data.data;
                }
            }).catch((err)=>{
                this.$message.error("数据获取失败");
            })
        },
    }
}

你可以在这里面将你想要封装的函数写在里面

2.在页面进行调用

image.png