Фабрики композируемых модулей и параметризованные композируемые модули
Создание фабрик композируемых модулей, выделение состояния для каждого экземпляра и предотвращение общего состояния-одиночки
«Фабрики композируемых модулей и параметризованные композируемые модули» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Компосаблы с параметрами
Обычный компосабл возвращает фиксированное поведение. Параметризованный компосабл принимает аргументы, чтобы настроить свою работу, например базовый URL, параметры или значения по умолчанию. Благодаря этому одна функция может обслуживать множество случаев.
Простой параметризованный компосабл
Передавайте конфигурацию в аргументах. В этом примере URL задаётся вызывающим кодом, поэтому один useFetch подходит для любой конечной точки.
import { ref } from "vue"
export function useFetch(url) {
const data = ref(null)
fetch(url).then(r => r.json()).then(d => data.value = d)
return { data }
}Приём объекта параметров
Если параметров много, принимайте объект параметров со значениями по умолчанию. Это делает место вызова более понятным, а компосабл — более гибким.
export function useFetch(url, options = {}) {
const { immediate = true, method = "GET" } = options
const data = ref(null)
function run() { /* fetch with method */ }
if (immediate) run()
return { data, run }
}Что такое фабрика компосаблов
Фабрика идёт ещё дальше: это функция, которая возвращает компосабл, заранее настроенный общими параметрами. Вы настраиваете её один раз, а затем получаете специализированный компосабл для использования в разных компонентах.
Создание фабрики
Внешняя функция захватывает общую конфигурацию (например, baseURL), а возвращаемая внутренняя функция является компосаблом и получает эту конфигурацию через замыкание.
export function createApi(baseURL) {
return function useApi(path) {
const data = ref(null)
fetch(baseURL + path).then(r => r.json()).then(d => data.value = d)
return { data }
}
}Использование фабрики
Вызовите фабрику один раз (часто в общем модуле), чтобы создать настроенный компосабл, а затем импортируйте и используйте его везде.
// api.js
export const useApi = createApi("https://api.example.com")
// component
import { useApi } from "./api"
const { data } = useApi("/users")Состояние, изолированное для каждого экземпляра
Каждый раз, когда Вы вызываете компосабл, создаваемые им ссылки являются новыми и локальными для этого вызова. Два компонента, вызывающие useFetch, получают независимые ссылки data — случайного совместного использования не происходит.
const a = useFetch("/posts") // its own data ref
const b = useFetch("/comments") // a separate data refОбщий синглтон на уровне модуля
Иногда Вы WANT один общий экземпляр. Объявите состояние на уровне модуля (вне функции), и компосабл замкнётся на него — все вызывающие стороны будут использовать одни и те же ссылки.
import { ref } from "vue"
const user = ref(null) // module-level, shared
export function useAuth() {
function login(u) { user.value = u }
return { user, login }
}Экземплярное состояние и синглтон
- Состояние внутри функции → новое при каждом вызове (для каждого компонента) — формы, средства получения данных.
- Состояние на уровне модуля → общий синглтон — текущий пользователь, тема, флаги всего приложения.
Выбирайте подход в зависимости от того, относится ли данные к компоненту или ко всему приложению.
Объединение фабрики и синглтона
Фабрика также может создавать синглтон: создайте общее состояние внутри вызова фабрики (он выполняется один раз), а возвращаемый компосабл замкните на этом состоянии.
export function createStore(initial) {
const state = ref(initial) // created once per factory call
return function useStore() {
return { state }
}
}
export const useCounter = createStore(0)Когда стоит использовать фабрику
Используйте фабрику, когда несколько компосаблов используют общую конфигурацию (базовый URL, заголовки, экземпляр клиента), или когда Вы создаёте небольшую библиотеку и хотите, чтобы пользователи настраивали её один раз. В остальных случаях параметризованный компосабл проще.
Быстрая проверка
Проверьте, насколько хорошо Вы понимаете фабрики компосаблов и области действия.
Повторение
Вы изучили фабрики компосаблов и области действия:
- Параметризованные компосаблы принимают аргументы или параметры для настройки поведения.
- Фабрика — это функция, возвращающая заранее настроенный компосабл (конфигурация захватывается через замыкание).
- Состояние внутри функции принадлежит отдельному экземпляру, а состояние на уровне модуля является общим синглтоном.
- Используйте отдельное состояние для данных конкретного компонента, а синглтон — для состояния всего приложения (текущий пользователь, тема).
Часто задаваемые вопросы
Урок «Фабрики композируемых модулей и параметризованные композируемые модули» бесплатный?
Да — полный текст урока «Фабрики композируемых модулей и параметризованные композируемые модули» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «Фабрики композируемых модулей и параметризованные композируемые модули»?
Создание фабрик композируемых модулей, выделение состояния для каждого экземпляра и предотвращение общего состояния-одиночки Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Фабрики композируемых модулей и параметризованные композируемые модули»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Продвинутая реактивность: shallowRef и triggerRef
- Фабрики композируемых модулей и параметризованные композируемые модули
- Конечные автоматы с XState во Vue
- effectScope для группировки эффектов