VueUse утилиты

Библиотека Naive UI предоставляет широкий набор компонентов для Vue 3, а VueUse — это коллекция утилит, упрощающих реактивное программирование. Совместное использование этих инструментов позволяет создавать гибкие и динамичные интерфейсы с минимальным количеством шаблонного кода.

Ключевой принцип взаимодействия заключается в том, что VueUse предоставляет реактивные состояния и эффекты, которые можно напрямую привязывать к свойствам компонентов Naive UI через v-model или computed-свойства.

Управление состоянием компонентов

Простейший пример — синхронизация состояния n-switch с реактивной переменной из VueUse:

import { ref } from 'vue';
import { useToggle } from '@vueuse/core';
import { NSwitch } from 'naive-ui';

const isActive = ref(false);
const toggleActive = useToggle(isActive);

// В шаблоне
<NSwitch v-model:value="isActive" @update:value="toggleActive()" />

Пояснение:

  • ref(false) создаёт реактивное булево значение.
  • useToggle предоставляет функцию переключения состояния.
  • v-model:value связывает компонент Naive UI с реактивным состоянием.

Такой подход позволяет управлять компонентами без ручного отслеживания событий @change и повторного присвоения значений.

Реактивные эффекты и наблюдение за состоянием

Использование watch и watchEffect из VueUse позволяет автоматически реагировать на изменения состояния компонентов:

import { watch } from 'vue';
import { useDark } from '@vueuse/core';

const isDark = useDark();

watch(isDark, (newValue) => {
  console.log('Темная тема:', newValue);
});

Этот пример демонстрирует динамическую реакцию на переключение темы в приложении. Компоненты Naive UI, такие как NButton или NCard, можно адаптировать под изменения темы через привязку стилей к состоянию isDark.

Управление локальным хранилищем

VueUse предоставляет useLocalStorage для синхронизации реактивных данных с localStorage, что особенно полезно для сохранения пользовательских настроек UI:

import { useLocalStorage } from '@vueuse/core';

const layoutMode = useLocalStorage('layoutMode', 'grid');

// Привязка к Naive UI компоненту
<NSelect v-model:value="layoutMode" :options="[
  { label: 'Grid', value: 'grid' },
  { label: 'List', value: 'list' }
]" />

Преимущества такого подхода:

  • Настройки интерфейса сохраняются между сессиями.
  • Реактивность сохраняется полностью.
  • Простая интеграция с компонентами выбора (NSelect, NSegmented).

Анимации и плавные переходы

Сочетание VueUse useTransition и компонентов Naive UI позволяет создавать плавные эффекты при показе или скрытии элементов:

import { useTransition } from '@vueuse/core';
import { ref } from 'vue';
import { NCollapse } from 'naive-ui';

const isOpen = ref(false);
const { style, isMounted } = useTransition(isOpen, { duration: 300 });

// В шаблоне
<NCollapse :value="isOpen">
  <div :style="style">Контент с плавным появлением</div>
</NCollapse>

Здесь useTransition управляет стилями элемента в зависимости от его состояния, что позволяет создавать плавные анимации без прямого вмешательства в CSS.

Управление временем и таймерами

Для реализации динамических интерфейсов часто требуются таймеры. VueUse предлагает useIntervalFn и useTimeoutFn для удобного управления:

import { useIntervalFn } from '@vueuse/core';
import { ref } from 'vue';

const count = ref(0);
const { pause, resume } = useIntervalFn(() => {
  count.value++;
}, 1000);

Такой счетчик можно привязать к компонентам Naive UI:

<NButton @click="pause">Пауза</NButton>
<NButton @click="resume">Продолжить</NButton>
<NTag>{{ count }}</NTag>

Работа с внешними ресурсами

VueUse предоставляет useFetch для реактивного получения данных:

import { useFetch } from '@vueuse/core';

const { data, isFetching, error } = useFetch('https://api.example.com/items').json();

<NDataTable :columns="columns" :data="data" :loading="isFetching" />

Особенности интеграции:

  • data автоматически обновляет таблицу при изменении ответа.
  • isFetching можно использовать для отображения индикатора загрузки через NSpin.
  • Обработка ошибок интегрируется с компонентами уведомлений NNotification.

Реактивные свойства браузера

VueUse содержит утилиты для работы с окнами и событиями браузера: useWindowSize, useMouse, useElementVisibility. Например, адаптация компонента под размер окна:

import { useWindowSize } from '@vueuse/core';

const { width } = useWindowSize();
const isMobile = computed(() => width.value < 768);

<NButton v-if="!isMobile">Полноразмерная кнопка</NButton>
<NButton v-else>Мобильная кнопка</NButton>

Такой подход позволяет строить адаптивные интерфейсы без необходимости писать сложный CSS или медиазапросы вручную.

Резюме ключевых практик

  • Связывать Naive UI компоненты с реактивными переменными VueUse через v-model.
  • Использовать VueUse для работы с локальным хранилищем, таймерами и API.
  • Реализовывать плавные анимации через useTransition.
  • Автоматически реагировать на события и размеры окна, упрощая адаптивность интерфейса.
  • Интегрировать fetch и уведомления с минимальным шаблонным кодом, полностью сохраняя реактивность.

Этот подход обеспечивает высокую скорость разработки и снижает количество рутинного кода при создании современных интерфейсов на Vue 3 с Naive UI.

Оглавление