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

No one assigned

    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