VueUse на практике: таймеры, треки и локальное состояние

VueUse — это коллекция готовых Composition API утилит для Vue 3. Она позволяет ускорить разработку, уменьшить повторяющийся код и управлять состоянием, эффектами и событиями в реактивном стиле. В этой статье разберём реальные кейсы: таймеры, треки и локальное состояние.

---

1. Таймеры и интервалы

Один из самых популярных хук-функций — useIntervalFn, которая заменяет обычный setInterval и автоматически управляет очисткой при уничтожении компонента.

Пример: простой таймер обратного отсчёта

<script setup>
import { ref } from 'vue'
import { useIntervalFn } from '@vueuse/core'const seconds = ref(10)const { pause, resume, isActive } = useIntervalFn(() => {
  if (seconds.value > 0) {
    seconds.value--
  } else {
    pause()
  }
}, 1000)
</script><template>
  <div>
    <p>Осталось: {{ seconds }} секунд</p>
    <button @click="resume" :disabled="isActive">Старт</button>
    <button @click="pause" :disabled="!isActive">Пауза</button>
  </div>
</template>

Реальный кейс: таймеры для игры или обратного отсчёта до события на сайте.

---

2. Треки и рефы состояния

VueUse предоставляет утилиты для отслеживания состояний, например, useEventListener, useMouse, useWindowSize.

Пример: отслеживание позиции мыши

<script setup>
import { ref } from 'vue'
import { useMouse } from '@vueuse/core'const { x, y } = useMouse()
</script><template>
  <p>Позиция мыши: {{ x }}, {{ y }}</p>
</template>

Реальный кейс: динамический UI, где элементы реагируют на движения пользователя (например, интерактивные карты или визуализаторы).

---

3. Локальное состояние и localStorage

VueUse позволяет легко синхронизировать реактивные переменные с localStorage через useLocalStorage.

Пример: тема приложения

<script setup>
import { useLocalStorage } from '@vueuse/core'const theme = useLocalStorage('app-theme', 'light')function toggleTheme() {
  theme.value = theme.value === 'light' ? 'dark' : 'light'
}
</script><template>
  <div :class="theme">
    <p>Текущая тема: {{ theme }}</p>
    <button @click="toggleTheme">Сменить тему</button>
  </div>
</template>

Реальный кейс: сохранение настроек пользователя, последних открытых вкладок, фильтров и других локальных состояний.

---

4. Комбинирование хуков

Можно комбинировать таймеры и локальное состояние, например, для автосохранения формы:

<script setup>
import { ref, watch } from 'vue'
import { useDebounceFn, useLocalStorage } from '@vueuse/core'const form = ref({ name: '', email: '' })
const savedForm = useLocalStorage('form-data', form.value)const save = useDebounceFn(() => {
  savedForm.value = { ...form.value }
}, 1000)watch(form, save, { deep: true })
</script>

Реальный кейс: редактор текста или форма с автосохранением без перегрузки сервера.

---

5. Вывод

VueUse упрощает работу с:

• Таймерами и интервалами (useIntervalFn, useTimeoutFn)
• Отслеживанием событий и состояний (useMouse, useWindowSize, useEventListener)
• Локальным состоянием и синхронизацией с хранилищем (useLocalStorage, useSessionStorage)

Эти инструменты помогают ускорить разработку, уменьшить boilerplate и создавать более реактивные и интерактивные интерфейсы.