Как правильно построить архитектуру приложения Vue?
Имеем.
Простой интернет магазин, пишем с нуля.
Шапка, пара слайдеров, карточки товара, спец предложение(большая карточка товара), футер,
Но, нужно переключатель на 3 и более городов, в каждом городе меняются цены, названия и возможно фото.
Бонусом к этому нужно небольшую админ панель / crm куда будут приходить заказы.
В админ панели нужно менять фото, текста - помним, что для каждого города разные.
В crm просто меняем например статусы.
Главный вопрос.
Что засунуть в компоненты, как лучше всего выстроить роуты, что хранить в стейт?
Так как магазин простой, думаю имеет смысл все сделать без БД а просто в стейте?
State хранит данные только на клиенте, и даже если Вы сделаете location.reload (обновите окно браузера), все данные потеряются. Так что без БД никак не обойтись.
Может неправильно описал ситуацию. Вы же собираетесь как-то обрабатывать заказы? Хранить данные? Все изменения, которые произойдут с условной переменной X, записанной Вами в State так и останутся на клиенте. Почитайте про клиент-серверную архитектуру приложения. Без этого ecommerce приложение не построить.
AlexCraft, почему я написал "хранить в state", так это потому что мне нужно часть данных вынести из верстки в объект, чтобы менять их в зависимости от города, то есть они заранее будут все прописаны на клиенте, и ни чего добавлять не будет во время работы с магазином.
В целом вопрос немного не в этом, вопрос именно в том, как построить архитектуру в целом.
Я понимаю, что я могу все написать в одном App.vue файле и закрыть вопрос.
localstorage браузера находится на клиенте ) А если нужно хранить данные о покупках, статистику ... в конце концов если покупатель захочет сделать возврат ... я вот про это всё. Не табличку же в гугл таблицах вести ...
Ну, если так обозначить задачу, то я бы предложил исходить из следующего: Vue дает возможность очень удобно масштабироваться от начальной структуры приложения. Первые компоненты вы можете сделать в зависимости от функций, которые Вам нужны. Например: карточка товара, список товаров, чекаут ... ну и т.п. А потом, когда возникнет необходимость, можно разбивать эти компоненты, вы ничего не потеряете. Доходить до того, что на каждый инпут будет отдельный компонент не надо, но бывает надо выделить например иконки и счётчики социальных сетей в отдельный компонент ... ещё какие-то вещи. Тут простор для творчества )
По поводу интернет-магазина. Есть очень достойный видеокурс: "React Node FullStack - Ecommerce с нуля до развертывания". Ссылки не выкладываю, чтобы не рекламировать, гуглите по названию. Там проект на React, но я его реализовывал через Vue.js. Очень неплохо структура приложения раскрыта, полезно будет для любого ecommerce проекта, особенно учебного.
Всё гораздо проще.
Использовать vue как клиент
И мыслить так как это клиентское приложение.
Хоть оно и имеет свой собственный аля клиент-сервер и может работать без back-end.
На этом можно с vue покончить.
Далее в игру вступает back end
Вот и делайте архитектуру там.
Продукты, корзины, заказы, хранение данных, удаление, разделение ролей и так далее.
Отдавайте vue json
А vue это всего лишь 1 единица клиента.
1 единица приложения, которая оторвется от сервера и будет работать в браузере не используя свой сервер.
PS, vue из коробки не настроен ssr.
А вообще можно использовать nuxt
Теже яйца только с боку.
Только там уже настроен ssr.
Средний
Средний
