vue Composables 组合式函数

官方文档在这里 cn.vuejs.org/guide/reusa…

作用

提取复杂逻辑，复用更方便。

例子

<script setup lang="ts">
import { useUserStatus } from '@/composables/useUserStatus'

const props = defineProps<{ user: User }>()
const { isOnline, statusText } = useUserStatus(props.user)
</script>

@是路径src/composables/useUserStatus

要自己写逻辑。

实现useUserStatus:

// 模拟 useUserStatus composable
function useUserStatus() {
    const isOnline = ref(true);
    const lastChanged = ref(new Date().toLocaleTimeString());
    
    function toggleStatus() {
        isOnline.value = !isOnline.value;
        lastChanged.value = new Date().toLocaleTimeString();
    }
    
    function simulateNetworkChange() {
        // 随机改变状态来模拟网络变化
        if (Math.random() > 0.5) {
            isOnline.value = true;
        } else {
            isOnline.value = false;
        }
        lastChanged.value = new Date().toLocaleTimeString();
    }
    
    return {
        isOnline,
        lastChanged,
        toggleStatus,
        simulateNetworkChange
    };
}