Vue.js single page application.
Приложение имеет 2 стрницы - домашняя страница (Blog-home) и страница записи (Blog-post). Компоненты страниц находятся в папке src/views. Их дочерние компоненты находятся в папках src/components/blog-home-page и src/components/blog-post-page соответственно.
Для хранения записей используется хранилище данных Vuex. Данные каждой записи хранятся в объекте, который хранится в массиве blogPosts. При добавлении новой записи в store ей добавляется новое свойство - уникальный идентификатор (id).
Для маршрутизации используется библиотека Vue Router. Страница blog-home соответсвует корневому маршруту '/', страница blog-post - маршруту '/post/:id', где :id - свойство id каждой объекта записи. При переходе на страницу записи, компонент blog-post получает входящий параметр - id записи и при загрузке компонента получает данные этой записи из store, находя нужный объект по полученному id. Переход на страницу записи возможен только по клику на кнопку перейти (т.е. через ). Попытка перейти на страницу записи, введя соответствующий маршрут в адресную строку браузера приведет к переадресации на домашнюю страницу (как и при вводе любого другого несуществующего маршрута).
Домашняя страница
Добавление новой записи осуществляется в модальном окне, открывающимя при клике на кнопку "+ Добавить". В компоненте модального окна реализовано связывание полей и ввода и данных (ViewModel). При клике на кнопку "Сохранить" объект с данными записи сохраняется в Vuex store (см. Хранение записей) и закрывается модальное окно. Переход на страницу записи осуществляется по клику на кнопку "перейти".
Страница записи
Есть возможность отредактировать запись, вернуться на домашнюю страницу без сохранения, сохранить запись и удалить запись. Используется двустороннее связывание (two-way binding) через директиву v-model полей ввода. При сохранении записи происходит перезапись этой записи в Vuex store (происходит поиск по всем записям (элементам массива blogPosts) с проверкой на равенство полученного id. Объект, прошедший проверку, перезаписывается. При нажатии на кнопку "Удалить" появляется модальное окно с подтверждением удаления. Подтверждение (нажатие на кнопку "Удалить" в модальном окне) вызывает удаление записи из массива blogPosts в Vuex store. Поиск нужного объекта в массиве также происходит по полученнму id.
npm install
npm run serve
npm run build
npm run lint