Vue как отличать разные типы компонентов

#архитектура #vuejs #чистый_код

У меня есть несколько типов компонентов.


Компоненты части страницы, например панелька, список лайков.
Эти компоненты просто часть разметки других страниц, сами они никакие fetch запросы
не делают, просто отображают некоторые данные.
Компоненты которые делают fetch запрос, например разделы форума, в зависимости от
имени форума подгружают с сервера данные и выводят их.
Компоненты страницы, то есть это полноценная страница, которая выводится в системе
роутинга и своём layout.


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

Думаю что компоненты части страниц (1) просто названиями называть, например Likes.

Компоненты с fetch (2) добавлять в название WithGetData или WithFetch, например ForumThreadPanelWithGetData

Компоненты странички (3) называть c Page префиксом, например ForumPage.

Если (2) и (3) вместе, то просто с Page префиксом делать без WithGetData 

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

Ответы

Ответ 1

Для данных нужен vuex. Если нужно запрашивать данные при переходах, то делать это
в хуках роутов. Компоненты - это реактивный DOM. Vuex + API утилиты - это данные. И
тогда не будет смысла в таких названиях. В приложении будет один источник данных, один
источник "истины".

Для сложных приложений (типа форума или магазина) это просто необходимо.

Хранилище Vuex "реактивно" и компоненты просто реагируют на изменения в нём. А также
могут инициировать изменения (commit, mutations). 


https://vuex.vuejs.org/ru/
https://router.vuejs.org/en/advanced/data-fetching.html
примеры приложений - https://github.com/vuejs/vuex/tree/dev/examples


дополнение к комментариям:

Хранилище Vuex это состояние приложения. Данные могут сохраняться где угодно, например
кэшироваться в LocalStorage. Смысл в том, что на изменения данных могут реагировать
разные компоненты одновременно и layout, и page, и navbar, уведомления и т.д. Также
хранилище Vuex поддерживает модульность, то есть можно создать отдельные модули для
разных сегментов приложения new Vuex({ modules: {...}}). 

И конечно это не отменяет возможность загрузки данных в компоненте, возможность использовать
локальное состояние. Но вы неизбежно столкнетесь с необходимостью уведомлять другие
компоненты об изменения состояния. Централизованное хранилище, хоть и выглядит сложновато,
помогает решить множество проблем согласованности и значительно упрощает логику приложения.