当前位置：首页 > news >正文

Vue 3.0 自定义 Composition API 管理状态

news 2025/7/17 2:41:22

自定义 Composition API 用于管理状态，先明确一个思路，Composition API 封装的是将视图与状态解耦，所以状态解耦是我们封装的第一目标，首先我们需要分析有哪些必要状态、有哪些必要处理函数，进而在组件中使用即可。

在 Vue 3 中，自定义 Composition API 通过组合函数来封装逻辑，提供了一种更灵活和可重用的方式来管理组件状态。

下面是两个详细的例子，分别展示了如何封装拖拽逻辑和动画逻辑。

1. 封装拖拽逻辑 useDrag

1.1. 创建组件useDrag

import { ref, onMounted, onUnmounted } from 'vue';export function useDrag() {const position = ref({ x: 0, y: 0 });const isDragging = ref(false);const onMouseDown = (event) => {isDragging.value = true;position.value = { x: event.clientX, y: event.clientY };}const onMouseMove = (event) => {if (isDragging.value) {const deltaX = event.clientX - position.value.x;const deltaY = event.clientY - position.value.y;position.value = { x: event.clientX, y: event.clientY };document.documentElement.style.setProperty('--drag-x', ~$(deltaX)px');document.documentElement.style.setProperty('--drag-y', ~$(deltaY)px');}};const onMouseUp = () => {isDragging.value = false;};onMounted(() => {window.addEventListener('mousemove', onMouseMove);window.addEventListener('mouseup', onMouseUp);});onUnmounted(() => {window.removeEventListener('mousemove', onMouseMove);window.removeEventListener('mouseup', onMouseUp);});return {position,onMouseDown};
}

1.2. 使用组件useDrag

<template><div class="draggable" @mousedown="onMousedown">Drag me!</div>
</template><script>
import { useDrag } from './useDrag';export default {setup() {const { onMouseDown } = useDrag();return {onMousedown: onMouseDown};}
};
</script><style>
.draggable {position: absolute;top: calc(50% + var(--drag-y, 0px));left: calc(50% + var(--drag-x, 0px));transform: translate(-50%, -50%);background-color: lightblue;padding: 20px;cursor: grab;
}
</style>

1.3. useDrag总结

1. 状态管理：position 用于跟踪拖拽元素的位置，isDragging 用于指示是否正在拖拽；

2. 事件处理：

(1). onMouseDown：记录初始化位置并设置拖拽状态；

(2). onMouseMove：根据鼠标移动更新位置，并通过 CSS 变量更新元素位置；

(3). onMouseUp：结束拖拽；

3. 生命周期管理：在组件挂载和卸载时分别添加和移除事件监听器；

2. 封装动画逻辑useAnimation

2.1. 创建组件useAnimation

import { ref, onMounted, onUnmounted } from 'vue';export function useAnimation(animationName, duration) {const isAnimating = ref(false);const startAnimation = () => {isAnimating.value = true;setTimeout(() => {isAnimating.value = false;}, duration);};return {isAnimating,startAnimation};
}

2.2. 使用组件useAnimation

<template><div :class="{ animated: isAnimating }" @click="startAnimation">Click me to animate!</div>
</template><script>
import { useAnimation } from './useAnimation';export default {setup() {const { isAnimating, startAnimation } = useAnimation('fade', 1000);return {isAnimating,startAnimation};}
};
</script><style>
.animated {animation: fade 1s;
}@keyframes fade {0% { opacity: 0; }100% { opacity: 1; }
}
</style>