useCounter: простой композируемый модуль
ссылка count, функции увеличения и уменьшения, сброс и предоставление только необходимого
«useCounter: простой композируемый модуль» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Создание useCounter
Мы напишем небольшой, но полноценный композабл: useCounter. Он управляет числом и предоставляет методы для его изменения — идеальный первый композабл.
Приём начального значения
Добавьте функции параметр initial со значением по умолчанию, чтобы вызывающий код мог запускать счётчик с любого значения.
function useCounter(initial = 0) {
// ...
}Внутренний реф счётчика
Внутри создайте ref для счётчика и задайте ему начальное значение. Это реактивное состояние, которым владеет композабл.
import { ref } from "vue";
function useCounter(initial = 0) {
const count = ref(initial);
}Функция increment
Определите функцию, которая изменяет реф. Поскольку count реактивен, данные автоматически обновляются у всех пользователей.
function increment() {
count.value++;
}decrement и reset
Добавьте дополнительные действия. reset использует исходное значение initial, сохранённое в замыкании.
function decrement() {
count.value--;
}
function reset() {
count.value = initial;
}Возврат интерфейса
Верните объект с реактивным состоянием и всеми методами. Это публичный интерфейс композабла.
return { count, increment, decrement, reset };Полный композабл
В итоге весь код получается компактным и пригодным для повторного использования в любом компоненте.
import { ref } from "vue";
export function useCounter(initial = 0) {
const count = ref(initial);
const increment = () => count.value++;
const decrement = () => count.value--;
const reset = () => count.value = initial;
return { count, increment, decrement, reset };
}Использование в компоненте
Вызовите его в <script setup> и выполните деструктуризацию. В шаблоне можно напрямую использовать count (значение извлекается автоматически) и привязать методы.
const { count, increment, decrement, reset } = useCounter(10);В шаблоне
Привяжите методы к кнопкам. Каждый щелчок изменяет общий реф, и представление обновляется.
<button @click="decrement">-</button>
<span>{{ count }}</span>
<button @click="increment">+</button>Независимые экземпляры
Каждый вызов useCounter создаёт собственный реф count. Если два компонента вызовут его, они получат отдельные изолированные счётчики.
const a = useCounter(); // own count
const b = useCounter(100); // own countДобавление вычисляемых значений
Вы можете расширить композабл производным состоянием, например вычисляемым значением isZero, и вернуть его вместе с остальными значениями.
import { computed } from "vue";
const isZero = computed(() => count.value === 0);
// add to return: { count, isZero, increment, ... }Быстрая проверка
Почему каждый вызов useCounter получает собственное состояние?
Итоги
Вы создали useCounter(initial): внутренний реф count, функции increment/decrement/reset и возвращаемый объект, предоставляющий реактивное состояние и методы. Каждый вызов создаёт независимый экземпляр.
Часто задаваемые вопросы
Урок «useCounter: простой композируемый модуль» бесплатный?
Да — полный текст урока «useCounter: простой композируемый модуль» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «useCounter: простой композируемый модуль»?
ссылка count, функции увеличения и уменьшения, сброс и предоставление только необходимого Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «useCounter: простой композируемый модуль»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Что делает компонуемую функцию хорошей
- useCounter: простой композируемый модуль
- useFetch: композируемый модуль для асинхронных данных
- VueUse: библиотека композируемых модулей