Как правильно сделать компонент?

Question

[Лев Александров]

Подскажите, пожалуйста.
Вот есть такой код у меня в проекте.
Карточка коммента.
Внутри нее происходят всякие действия, которые я эмичу наружу и в родителе привязываю колбэки on*, в которых идет отправка запросов на API.
Насколько такой подход правилен?
Не проще ли внутри это все сделать?
Где-то слышал, что лучше внутрь карточки это все не зашивать.
Но а если у меня в нескольких местах выводятся эти карточки?
каждый раз таскать за собой эти колбэки?

<CommentCard
    v-for="comment in comments"
    @delete="onCommentDelete"
    @reply="onCommentReply"
    @edit="onCommentEdit"
    @like="onCommentLike"
    ...
/>

const onCommentDelete = (event) => { ... }
const onCommentReply = (event) => { ... }
const onCommentEdit = (event) => { ... }
const onCommentLike = (event) => {
    // api call

    event.comment.like_count += 1
}

Answer 1

[Александр Маджугин]

Почему это не зашивать?
Как раз более правильным будет зашить все запросы в тот компонент который их отправляет.

Какие могут быть исключения?

1 Если один запрос отправляют разные компоненты, но тогда лучше пересмотреть сами эти компоненты - например сделать один родительский, который объединит в т.ч. и запросы и несколько внутренних, сменяемых компонентов реализующих например разное представление. В крайнем случае сделать миксин с запросами

2 Если данные прилетающие в ответ на отправляемые запросы используются разными компонентами, а не только тем которые отправляет запрос. В этом случае для хранения данных лучше использовать стор и туда же поместить запросы, например в экшены viuex, а компоненты в этом случае должны взаимодействовать не с сервером, а с vuex.