vue3中mixins的使用

vue3-mixins

在开发的过程中我们会遇见相同或者相似的逻辑代码。
可以通过vue的 mixin 功能抽离公共的业务逻辑，
然后通过impor再组件中引入。通过mixins注册进来。
这样我们就可以使用mixin中共同的业务逻辑
我们通常会在src下创建一个文件夹mixins。
然后在创建mixins/index.js文件

index.js

import { ref } from 'vue'
export default function () { 
    let num = ref(0);
    let like = ref(false)
    let favBtn = () => { 
        num.value += 1;
        like.value = false
        setTimeout(() => { 
            like.value=true
        })
    }
    // 暴露出去
    return {
        num,
        like,
        favBtn
    }
}

TestA.vue文件(组件)

<template>
    <div class="a">
        <h1> 我是A组件 </h1> 
        <p>数量{{num }}</p>
        <el-button @click="favBtn"> {{like ? '收藏过' :'未收藏'}} </el-button>
    </div>
</template>
<script setup lang="ts">
import mixins from '../mixins/index.js'
let {   num, like, favBtn }=mixins()
</script>

TestB.vue文件(组件)

<template>
    <div class="b">
        <h1> 我是B 组件 </h1> 
        <p>数量{{num }}</p>
        <el-button @click="favBtn"> {{like ? '收藏过' :'未收藏'}} </el-button>
    </div>
</template>

<script setup lang="ts">
import mixins from '../mixins/index.js'
let {  num,  like, favBtn }=mixins()
</script>

使用组件的页面

<template>
  <div>
      <TestA></TestA>
      <TestB></TestB>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "@vue/reactivity"
import TestA from "../components/TestA.vue"
import TestB from "../components/TestB.vue"
</script>

解释

从上面的图中发现：
在混合mixin中，各个数据彼此是互相独立的。不会互相影响。