Встроенные Quasar композаблы

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

Основные принципы работы композаблов

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

    import { ref, computed } from 'vue'

export function useCounter(initial = 0) {
  const count = ref(initial)
  const increment = () => count.value++
  const decrement = () => count.value--
  const double = computed(() => count.value * 2)

  return { count, increment, decrement, double }
}

  2. Встраиваемость в компоненты Quasar Любой композабл можно использовать внутри компонентов Quasar, таких как QBtn, QInput, QTable, не изменяя их базовую функциональность.

    <template>
  <div>
    <q-btn @click="increment">Увеличить</q-btn>
    <p>Значение: {{ count }}</p>
    <p>Удвоенное: {{ double }}</p>
  </div>
</template>

<script setup>
import { useCounter } from './composables/useCounter'

const { count, increment, double } = useCounter(5)
</script>

Встроенные Quasar композаблы

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

  1. useQuasar Основной композабл, предоставляющий доступ ко всем глобальным возможностям Quasar.

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

    import { useQuasar } from 'quasar'

const $q = useQuasar()

$q.notify({
  message: 'Успешная операция',
  color: 'green',
  position: 'top-right'
})

if ($q.screen.gt.sm) {
  console.log('Экран больше small')
}

    Ключевые возможности useQuasar:

    • Доступ к глобальной теме, цветовой палитре, CSS-переменным.
    • Работа с screen для адаптивного поведения компонентов.
    • Управление уведомлениями, диалогами, спиннерами.

  2. useDialog Управление модальными окнами и диалогами. Обеспечивает декларативный подход без необходимости вручную импортировать QDialog в каждом компоненте.

    import { useDialog } from 'quasar'

const dialog = useDialog()

dialog({
  title: 'Подтверждение',
  message: 'Вы уверены?',
  cancel: true,
  persistent: true
}).onOk(() => console.log('Подтверждено'))

  3. useNotify Позволяет отправлять уведомления с настройкой внешнего вида и поведения.

    import { useNotify } from 'quasar'

const notify = useNotify()

notify({
  message: 'Данные сохранены',
  color: 'blue',
  timeout: 2500
})

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

    import { useLoading } from 'quasar'

const loading = useLoading()

async function fetchData() {
  loading.show()
  await fetch('/api/data')
  loading.hide()
}

  5. useScreen Реактивный композабл для отслеживания состояния экрана и брейкпоинтов. Используется для адаптивного рендеринга элементов интерфейса.

    import { useScreen } from 'quasar'

const screen = useScreen()

if (screen.lt.md) {
  console.log('Мобильный режим')
}

  6. useDark Управление темной и светлой темой приложения.

    import { useDark } from 'quasar'

const isDark = useDark()

function toggleTheme() {
  isDark.toggle()
}

Организация собственных композаблов с использованием Quasar

Quasar композаблы можно комбинировать с пользовательской логикой:

import { ref } from 'vue'
import { useNotify } from 'quasar'

export function useFormHandler() {
  const formData = ref({ name: '', email: '' })
  const notify = useNotify()

  const submit = () => {
    if (!formData.value.name || !formData.value.email) {
      notify({ message: 'Заполните все поля', color: 'red' })
      return
    }
    notify({ message: 'Форма отправлена', color: 'green' })
  }

  return { formData, submit }
}

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

Рекомендации по использованию встроенных композаблов

  • Минимизировать дублирование кода: общий функционал выносить в композаблы.
  • Сочетать с Composition API Vue 3: использовать ref, computed, watch для реактивности.
  • Использовать в глобальных компонентах Quasar: упрощает работу с темами, уведомлениями и адаптивностью.
  • Следить за производительностью: избегать сложных вычислений в computed, использовать watchEffect для реактивных цепочек.

Итоговое преимущество

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

Оглавление