vue-minxins混入选项式、组合式写法和解析

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项，并且功能独立。

选项式写法

// minxin.js
export const fuMinXin={
    data(){
        return {
            num: 1,
            isType: false
        }
    },
    methods:{
        fuBtn(params){
            this.isType = true
            this.num++
            setTimeout(()=>{
                this.isType = false
            },2000)
        }
    }
}

// xxx.vue
<template>
    <div>
        {{num}}
        <button @click='fuBtn(1)'>{{isType ? '收藏中' : '收藏' }}</button>
    </div>
</template>
<script setup>
import { fuMinXin } from 'minxins'
export default{
    data(){
        return {
            str:'123'
        }
    },
    minxins:[ fuMinXin ]
}
</script>

组合式写法

// minxin.js
import { ref } from 'vue';
export default function(){
   let num = ref(1)
   let isType = ref(false)
   let fuBtn = () => {
       isType.value = true
       num.value++
       setTimeout(()=>{
            isType.value = false
       },2000)
    }
    return {
        num,isType,fuBtn
    }   
}

// xxx.vue
<template>
    <div>
        {{num}}
        <button @click='fuBtn(1)'>{{isType ? '收藏中' : '收藏' }}</button>
    </div>
</template>
<script setup>
import  minxin  from 'minxins'
let { num, isType, fuBtn } = minxin()
</script>