Composition API в контексте Quasar

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

`setup()` и реактивность

В ядре Composition API лежит функция setup(), которая вызывается перед созданием компонента. Внутри setup() можно объявлять реактивные переменные, вычисляемые свойства и методы. Для этого используются:

ref — создаёт реактивную примитивную переменную:

import { ref } from 'vue';

export default {
  setup() {
    const counter = ref(0);
    const increment = () => {
      counter.value++;
    };
    return { counter, increment };
  }
};

reactive — создаёт реактивный объект или массив:

import { reactive } from 'vue';

export default {
  setup() {
    const user = reactive({ name: 'Alex', age: 30 });
    const setName = (newName) => { user.name = newName; };
    return { user, setName };
  }
};

Quasar полностью совместим с этими механизмами, что позволяет использовать реактивность вместе с компонентами библиотеки, такими как QBtn, QInput, QTable и другими.

Работа с компонентами Quasar через Composition API

Компоненты Quasar предоставляют обширный набор событий и пропсов. В Composition API их обработка реализуется через реактивные данные и функции внутри setup(). Пример работы с кнопкой:

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

export default {
  components: { QBtn },
  setup() {
    const clicked = ref(false);
    const handleClick = () => { clicked.value = true; };

    return { clicked, handleClick };
  }
};

В шаблоне Quasar компонент связывается с функциями и реактивными переменными через директиву v-on и биндинг пропсов:

<q-btn label="Нажми меня" @click="handleClick" color="primary" />
<p v-if="clicked">Кнопка нажата!</p>

Computed и Watch

computed создаёт вычисляемые свойства, которые автоматически пересчитываются при изменении зависимостей. В Quasar это удобно для динамического управления состоянием компонентов:

import { ref, computed } from 'vue';

export default {
  setup() {
    const firstName = ref('Alex');
    const lastName = ref('Smith');
    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    return { firstName, lastName, fullName };
  }
};

watch позволяет отслеживать изменения реактивных переменных и выполнять побочные эффекты:

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    watch(count, (newVal, oldVal) => {
      console.log(`Count изменился с ${oldVal} на ${newVal}`);
    });

    const increment = () => { count.value++; };
    return { count, increment };
  }
};

В Quasar watch часто применяется для слежения за состоянием форм или фильтров в таблицах (QTable), чтобы динамически подгружать данные.

Использование Composition API с Quasar Plugins

Quasar предоставляет множество плагинов, таких как Dialog, Notify, LocalStorage и Cookies. Их использование в Composition API происходит через импорт соответствующего плагина и вызов методов внутри setup():

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

export default {
  setup() {
    const $q = useQuasar();
    const showMessage = () => {
      $q.notify({
        message: 'Привет от Quasar!',
        color: 'positive',
      });
    };

    return { showMessage };
  }
};

Подключение плагинов через useQuasar() даёт прямой доступ ко всем глобальным функциям Quasar в рамках Composition API, сохраняя реактивность и простоту управления.

Составные функции (Composables)

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

import { ref } from 'vue';

export function useForm() {
  const formData = ref({ name: '', email: '' });
  const isValid = ref(false);

  const validate = () => {
    isValid.value = formData.value.name !== '' && formData.value.email !== '';
  };

  return { formData, isValid, validate };
}

Использование в компоненте Quasar:

import { useForm } from './useForm';
import { QInput, QBtn } from 'quasar';

export default {
  components: { QInput, QBtn },
  setup() {
    const { formData, isValid, validate } = useForm();
    return { formData, isValid, validate };
  }
};

<q-input v-model="formData.name" label="Имя" />
<q-input v-model="formData.email" label="Email" />
<q-btn label="Проверить" @click="validate" :disable="!isValid" />

Интеграция с Vue Router и Vuex/Pinia

Composition API позволяет напрямую использовать роутер и store внутри setup(). В Quasar это важно для навигации и управления глобальным состоянием:

import { useRouter } from 'vue-router';
import { useStore } from 'pinia';

export default {
  setup() {
    const router = useRouter();
    const store = useStore();

    const goToHome = () => { router.push({ name: 'home' }); };
    const incrementCounter = () => { store.counter++; };

    return { goToHome, incrementCounter };
  }
};

Это делает компоненты более чистыми и упрощает тестирование, так как логика полностью изолирована внутри setup().