Каков best practice для общего функционала во Vue?

Доброго дня.
Допустим, у нас есть какой-то общий функционал, родительский компонент, который должен быть применен к другим компонентам. Например, спектр автономных компонентов, которые внутри сами забирают данные из определенного провайдера.

Для этого я вижу несколько вариантов:
- композиция (предпочтительно, но в мире JS нельзя сделать без костылей, так я бы в конструктор передал абстракцию)
- hoc (тоже весьма неплохо)
- наследование (не очень хорошо, снижает гибкость и вообще)
- миксины (аналог трейтов в php, по-моему, не самая удачная практика и по идее, миксины должны обкидывать помидорами за то, что там можно определить Lifecycle hooks и опции типа data, столько простора для индусов)

Собственно, вопрос, как лучше всего это сделать во Vue? В реакте сейчас я бы воспользовался хуками.
Заранее спасибо.
  • Вопрос задан
  • 2479 просмотров
Решения вопроса 2
Alex_Wells
@Alex_Wells
PHP/TS/Kotlin developer
В третей вьюхе будет композиция с помощью нового composition API. Говорят, что они схожи с реактовскими хуками.

Пока что можно юзать https://github.com/vuejs/composition-api - порт того же (или +- того же) АПИ на вторую версию. Важно понимать, что это НЕ полный порт, а лишь compat слой для легкого перехода на третюю версию.
Ответ написан
Heian
@Heian Автор вопроса
Ашот
В итоге сделал при помощи декораторов. Оказалось одним из самых удобных решений, особенно в контексте того. что я использую vue-class-property декоратор. От классического hoc'a выгодно отличается тем, что не создает под капотом новый компонент, а просто возвращает конструктор, который затем js сам применяет, где надо.

Выглядит при этом тоже очень красиво.
@Filterable // мой декоратор
@Component({
   // options
})
export default class extends Vue {
   // component logic
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Vaulter
Касательно провайдеров данных : их лучше вывести отдельно в сервисы, и передавать в свойства компонентов. Упрощённое подобие DI/RoC. Перед созданием vue app создаём все сервисы и передаём объектом, с полями равными именам сервисов и значениями равными самим объектам сервиса, в свойство App .
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы