Контекст
В PR #176 монолитный OrderView.vue разбит на подкомпоненты (OrderInfoTab, OrderProductsTab, OrderAddressTab, OrderHistoryTab). Декомпозиция правильная, но связь между родителем и детьми реализована через передачу функций как props — не идиоматично для Vue.
Проблема
Каждый подкомпонент получает 10-15 функций через props:
// OrderView.vue
const infoTabProps = computed(() => ({
formatDate,
formatPrice,
getFieldWidthClass,
isFieldEditable,
getFieldDisplayValue,
getFieldCompareField,
getFieldOptions,
confirmFinalizeOrder,
createOrder,
saveOrder,
goBack,
// ...
}))
Авторы Vue рекомендуют provide/inject для передачи зависимостей вглубь дерева компонентов, а утилитные функции — выносить в composables.
Предлагаемый план
- Composable
useOrderFormatters() — вынести formatDate, formatPrice, formatOptions, getFieldWidthClass и прочие чистые утилиты
provide('orderContext', ...) в OrderView — для shared state (order, saving, isDraft, isCreateMode) и action-функций (saveOrder, createOrder, goBack, confirmFinalizeOrder)
inject('orderContext') в подкомпонентах — вместо длинного списка props
- Props оставить только для данных, специфичных для конкретной вкладки (
orderFieldsBySection, addressFieldsBySection, products, logs)
Ожидаемый результат
- Props сокращаются до 2-3 на компонент (специфичные данные)
- Shared state и утилиты доступны через inject/composable
- Добавление нового поля/функции не требует протягивания через props chain
- Идиоматичный Vue 3 паттерн
Затронутые файлы
vueManager/src/components/OrderView.vue
vueManager/src/components/order/OrderInfoTab.vue
vueManager/src/components/order/OrderProductsTab.vue
vueManager/src/components/order/OrderAddressTab.vue
vueManager/src/components/order/OrderHistoryTab.vue
- Новый:
vueManager/src/composables/useOrderFormatters.js (или аналог)
Контекст
В PR #176 монолитный
OrderView.vueразбит на подкомпоненты (OrderInfoTab,OrderProductsTab,OrderAddressTab,OrderHistoryTab). Декомпозиция правильная, но связь между родителем и детьми реализована через передачу функций как props — не идиоматично для Vue.Проблема
Каждый подкомпонент получает 10-15 функций через props:
Авторы Vue рекомендуют
provide/injectдля передачи зависимостей вглубь дерева компонентов, а утилитные функции — выносить в composables.Предлагаемый план
useOrderFormatters()— вынестиformatDate,formatPrice,formatOptions,getFieldWidthClassи прочие чистые утилитыprovide('orderContext', ...)вOrderView— для shared state (order,saving,isDraft,isCreateMode) и action-функций (saveOrder,createOrder,goBack,confirmFinalizeOrder)inject('orderContext')в подкомпонентах — вместо длинного списка propsorderFieldsBySection,addressFieldsBySection,products,logs)Ожидаемый результат
Затронутые файлы
vueManager/src/components/OrderView.vuevueManager/src/components/order/OrderInfoTab.vuevueManager/src/components/order/OrderProductsTab.vuevueManager/src/components/order/OrderAddressTab.vuevueManager/src/components/order/OrderHistoryTab.vuevueManager/src/composables/useOrderFormatters.js(или аналог)