Skip to content

refactor: заменить передачу функций через props на provide/inject в подкомпонентах заказа #196

@biz87

Description

@biz87

Контекст

В 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.

Предлагаемый план

  1. Composable useOrderFormatters() — вынести formatDate, formatPrice, formatOptions, getFieldWidthClass и прочие чистые утилиты
  2. provide('orderContext', ...) в OrderView — для shared state (order, saving, isDraft, isCreateMode) и action-функций (saveOrder, createOrder, goBack, confirmFinalizeOrder)
  3. inject('orderContext') в подкомпонентах — вместо длинного списка props
  4. 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 (или аналог)

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions