Композаблы для платформ

Композаблы в Quasar Framework представляют собой высокоуровневые компоненты и функциональные блоки, которые позволяют строить адаптивные и переносимые пользовательские интерфейсы для веба, мобильных устройств и настольных приложений. Они служат связующим звеном между стандартными Vue-компонентами и платформенными API, обеспечивая унифицированный подход к разработке кроссплатформенных приложений.

Принцип работы

Композаблы в Quasar реализуются через функции, которые возвращают реактивные данные, методы и объекты состояния. Это концепция, схожая с Composition API в Vue 3, что позволяет:

  • Изолировать бизнес-логику от представления.
  • Повторно использовать функциональные блоки в разных компонентах и проектах.
  • Управлять состоянием и событиями платформы без дублирования кода.

Основная структура композабла включает:

import { ref, computed } from 'vue';

export function useExample() {
  const count = ref(0);

  const doubleCount = computed(() => count.value * 2);

  function increment() {
    count.value++;
  }

  return {
    count,
    doubleCount,
    increment
  };
}

Здесь useExample является композаблом, который инкапсулирует реактивное состояние и методы для его изменения.

Интеграция с платформенными API

Quasar предоставляет обертки для взаимодействия с платформами через свои сервисы, такие как:

  • Platform – позволяет определять текущую среду (Web, Cordova, Capacitor, Electron, SSR).
  • Screen – обеспечивает реактивные данные о размерах и ориентации экрана.
  • Notify, Dialog, Loading – высокоуровневые UI-сервисы, работающие независимо от платформы.

Пример использования платформенных данных:

import { Platform, Screen } from 'quasar';
import { computed } from 'vue';

export function useResponsive() {
  const isMobile = computed(() => Platform.is.mobile || Screen.lt.sm);
  
  return { isMobile };
}

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

Композаблы для управления состоянием UI

Quasar активно использует композаблы для управления состоянием компонентов:

  • useDialog – управление всплывающими диалогами.
  • useNotify – централизованная система уведомлений.
  • useLoading – контроль индикаторов загрузки.

Пример управления диалогом через композабл:

import { ref } from 'vue';
import { useDialog } from 'quasar';

export function useConfirmation() {
  const dialog = useDialog();

  function confirmAction(message) {
    return dialog({
      title: 'Подтверждение',
      message,
      ok: true,
      cancel: true
    });
  }

  return { confirmAction };
}

Создание кроссплатформенных компонентов

Композаблы позволяют строить компоненты, которые автоматически адаптируются под платформу. Например, компонент навигации может менять поведение на мобильных устройствах и десктопе:

import { Platform } from 'quasar';
import { ref } from 'vue';

export function useNavigation() {
  const drawerOpen = ref(false);

  function toggleDrawer() {
    drawerOpen.value = !drawerOpen.value;
  }

  const isMobile = Platform.is.mobile;

  return { drawerOpen, toggleDrawer, isMobile };
}

В этом примере логика открытия бокового меню унифицирована, а рендеринг может адаптироваться через v-if или v-show в зависимости от платформы.

Рекомендации по организации композаблов

  1. Изоляция логики – каждый композабл должен отвечать за одну функциональность или одну область состояния.
  2. Повторное использование – выносить общие методы и реактивные свойства в отдельные композаблы.
  3. Согласованность с платформой – использовать сервисы Quasar для работы с платформой и экраном, избегая прямого доступа к window или document.
  4. Тестируемость – композаблы легко тестируются через unit-тесты, так как не зависят напрямую от UI-компонентов.

Примеры комбинации композаблов

Часто несколько композаблов комбинируются для создания сложной функциональности:

import { useResponsive } from './useResponsive';
import { useNavigation } from './useNavigation';

export function useLayout() {
  const { isMobile } = useResponsive();
  const { drawerOpen, toggleDrawer } = useNavigation();

  function adjustLayout() {
    if (!isMobile.value && drawerOpen.value) {
      drawerOpen.value = false;
    }
  }

  return { isMobile, drawerOpen, toggleDrawer, adjustLayout };
}

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

Итог

Композаблы в Quasar позволяют строить модульные, кроссплатформенные и повторно используемые функциональные блоки. Они интегрируются с платформенными сервисами Quasar, управляют состоянием UI и упрощают адаптацию интерфейсов под различные устройства, обеспечивая масштабируемость и удобство поддержки кода.

Оглавление