Настраиваем Vuex. Централизованное хранилище. Spring Boot REST

[@АлександрБондарев-ъ7ф]

Спасибо за труд. Видео как всегда огонь. Мозг закипел от попытки понять. что мы тут делаем, но это, вероятно, из-за того, что меня отвлекали.

[@vladsoldatenko8561]

Спасибо за годные уроки, они достойны сотни тысяч лайков. Правда, из-за того, что я знаю JavaScript чуть менее чем "вообще ни разу не знаю"(я имею ввиду что только-только начал разбираться с JS) , Vue.js , а также то, что происходит на видео, немного сбивают с хода мысли . Но всё же, спасибо!

[@alexeysharandin7364]

Уроки по новым хипстеровским технологиям, это боль :) Модно, круто, но я 2е видео матом ругаюсь и нахожу в своих скриптах косяк за косяком. Спасибо Андрей!

[@armantulendi7320]

вы огромный трудолюбец))

[@YuretsUA]

В начале видео думал что это, а главное зачем, но затем, когда вкурил как это работает пересмотрел свой проект, особенно когда один и тот-же объект по несколько этажей между компонентами пробрасывается прикрутил Vuex, действительно удобно обращаться к одному хранилищу. Насчет вычисляемых свойств (sortedMessages) как по мне перебор , гораздо лучше сортировку и фильтрацию делать уже в компоненте (К примеру сортировка или фильтры), но кому как удобнее.

[@letsCodeDru]

Ну надо же было показать, как геттеры использовать можно

[@borismatashin5891]

Dru, лучший)

[@IvanIvanov-oi5nx]

С наступившим! Спасибо огромное, полезно, хоть слету и сложновато. P.s.: В начале видео оговорился - мы ведь пишем sarafan ;)

[@VASY1PUPKIN2]

Андрей С новы Годом Тебя!!! Желаем тебе успехов в жизни, творческого вдохновение тебе и твоему каналу, и главное здоровье , что бы его хватало на все, что ты задумал!!

[@letsCodeDru]

Ох, спасибо :) пока что времени не хватает. Но здоровье тоже важно, да :)

[@AnnaSmirnova1]

Спасибо!!! Время прохождения видео 29.12 чётенько)

[@Zabavnoo]

С Новым годом. Очень годные туториалы

[@lumea-arboris]

ОЧЕНЬ КРУТО!!!! очень много инфы, блин на бэкенде еще кучу всего изучать приходится, еще и фронт сверху, вообще супер! По поводу дополенений, какие можно было б накрутить, правда к этому плейлисту не очень наверное подходит, но думаю вот это было б интересно: 0) Надо проверочку еще сделать, на разных пользователей, чтобы не могли удалять чужие сообщения или их редактировать, ну тут можно разными путями пойти, в принципе не сильно важно и возможно не очень интересные пункты как следующие. 1) Писать сообщения не в базу данных, а в rabbitmq или kafka 2) Можно добавить поиск сообщений, подключив elasticsearch или solr 3) Было бы круто, чтобы показал как залить в интернет проект , я примерно знаю как залить бэкенд проект, а вот фронт даже не представляю как пока что. Вот бесплатный сайт например www.heroku.com/ 500 мб дают свободного пространства, бесплатный постгрес, ну и плюс еще всякие технологий, единственный минус, за 24 часа работы, 6 часов по-моему проект не будет доступен, но это не страшно, учебный же проект и если на проект никто не заходит в течении 30 минут, железо переходит в спящий режим, а когда поступает запрос, то сервак заново стратуется)

[@semionrutshtein1745]

Great project

[@shtan5583]

С наступающим Новым Годом, Дрю! Спасибо за туториалы

[@dmitrysomsin2117]

Спасибо за урок

[@victormog]

С Новым годом! И спасибо!!!

[@ekhodzitsky]

Андрей! С новым годом! Спасибо за канал, на котором все сложное становится простым. Или хотя бы проще ))

[@Name-mm2kx]

Спасибо за подарок, с наступающим!)

[@МихайлоЄвтушенко-е2ф]

С новым годом, спасибо тебе за твой труд!!! Надеюсь у будущем видео не станут платными)))

[@ihardubadzelau6497]

Спасибо Андрей за твою работу! Это лучшее изложение материала, которое я видел! Есть просьба, можно ли в конце серии по этому проекту, сделать отдельное видео по изменению этого проекта с development на production? а также на примере показать как автоматически настраивается deploy на idea. И т.к. компании которые предоставляют java хостинг - единицы, было бы совсем шикарно, если сделать видео отдельное, как мы берем linux vps сервер и на чистой системе debian или ubuntu развертываем наш проект, показав установку javasdk, tomcat, postgresSQL и вообще что еще нужно для данного проекта в минимальном наборе.

[@RostyslavShynlov]

Ты просто замечателен

[@daurenaldabergenov5984]

спасибо за видео!

[@СтаниславБарышников-у6е]

Спасибо за урок!

[@anu8is930]

Спасибо тебе! Ты очень крутой и очень вдохновляешь лично меня на изучение Java. С нетерпением жду новых видео. Кстати, о чем планируешь еще записывать в будущем?

[@letsCodeDru]

Много о чем, всего не перечислить ;)

[@anu8is930]

letsCode жду с нетерпением))) надеюсь будет по спринг бут ещё что-то крутое)))

[@tmdan91]

Спасибо!

[@ПавелПавлуха-3кцпш]

Подозреваю, что вопрос в пустоту, но: почему в App.vue в операторе switch мы теперь не пытаемся учитывать состояние гонки, как в прошлом видео? Поддержка мутаций во vuex сделает это за нас?

[@aleksplats]

С настройкой babel под вебпак как раз сегодня мучился. Включая муки с включением в дев сервер локальных шрифтов и фонтов для матерал. Babel в итоге включается, как плагин и не нужно импортить полифиллы. Создается под него файл конфиги .babelrc. Пока я этого не сделал, в моем проекте постоянно как раз валился async

[@МихаилМалкин-п2ю]

При редактировании записи возникает ошибка Duplicate keys detected - она возникает из-за двух вызовов - addMessageMutation и updateMessageMutation. При этом данные там приходят разные - в одной есть дата (update), а в другой нет (add)... Видимо что-то не так настроено в websocket?

[@user-pro100rik]

@letsCode, спасибо за урок. Вопрос касаемо мутаций. Если мы напишем updateUser(state, data) {state.user = data;} , то это будет не иммутабельно, верно? А чтобы было иммутабельно, следует делать updateUser(state, data) { state.user = {...state.user, data};} ? Как проверить что 1-й вариант плох? Vue\Vuex никак не ругаются

[@antihype3450]

[Vue warn]: Duplicate keys detected: '52'. This may cause an update error. Если у кого то такая ошибка вылезает то поменяйте

[@ДмитрийРоманчук-ч4т]

Андрей, спасибо за прекрасный курс, я заметил чем дальше, тем больше js используется, какой js используется для разработки приложений на Спринге? как на счет Ангуляра или Реакта? или это больше компетенция front-end разработчика?

[@letsCodeDru]

Чем vue не устраивает?

[@alexandrguravskiy9985]

что то у меня при удалении в середине удаляет два елемента - я так написал мне помогло let mas = state.messages mas.splice(removeIndex, 1) state.messages.slice(0, mas.length, mas) и при добавлении нужна проверка что бы не дублировало if (index === -1) { state.messages = [ ...state.messages, message ] а как вы решили проблему?

[@МихаилШарашин-ъ2ъ]

Очень круто, спасибо за видео! Возник вопрос, зачем в Actions вызывать соответствующие мутации, если они вызываются через вебсокет?

[@gamerecords_site]

Интересно как бы выглядел этот проект с нынешними технологиями Spring + Vue3

[@ОлесяЛазарева-ж4и]

Такую запись: if (deletionIndex > -1) { state.messages = [ ...state.messages.slice(0, deletionIndex), ...state.messages.slice(deletionIndex + 1) ]; } можно заменить на более красивую с помощью метода splice if (deletionIndex > -1) { state.messages = [ ...state.messages.splice(deletionIndex, 1) ]; }

[@letsCodeDru]

Неееееет. Стоооой!!!! Splice модифицирует изначальную коллекцию, это даёт побочные эффекты. Можно очень странные баги поймать, которые хрен поймёшь откуда идут

[@ОлесяЛазарева-ж4и]

@@letsCodeDru дублирование кода - это плохая практика. Не надо так делать, за это бьют по рукам клавиатурой. Если нужно скопировать первоначальную коллекцию, не изменяя текущую, в начале положи ее в переменную с помощью concat() без параметров. Если в concat() мы ничего не передали, то он просто копирует массив, возвращая новую коллекцию. if (deletionIndex > -1) { let newArr = ...state.messages.concat(); state.messages = [ newArr.messages.splice(deletionIndex, 1) ]; } Может быть я в Java полный ноль, но в Javascript мне такие вещи хорошо бросаются в глаза, т.к. не первый год на нем пишу.

[@lumea-arboris]

@@ОлесяЛазарева-ж4и ну ты и наехала конечно, "бьют клавиатурой по рукам", это же обучающее видео, а не продакшн, тем более я думаю @dru понимает об этом) и тем более во время разработки - бывает дублирование кода, после разработки - делается рефакторинг. И вообще где тут дублирование кода? ОМГ

[@ОлесяЛазарева-ж4и]

@@@lumea-arborisну вот такая я уж злобная женщина)) работа тимлидом накладывает свой отпечаток. И не ради того, чтобы Андрея побольнее клюнуть, или самоутвердиться за чей-то счет - просто уже наболело, ё-моё (( Ребята на ютубе видюшек насмотрятся, а потом на работе в боевой проект это тащат. И чтобы переучить сотрудника, у тимлида уходит очень много времени и сил.

[@r199971]

Расскажи про jwt !!!

[@yevheniidubinin8362]

как лучше сделать приложение (опросный лист) которое после отправки сообщения (ответа на текущий вопрос) вернет новый вопрос с вариантами ответа, можно ли как-то создать канал вебсекета для текущей сессии пользователя? или тут вообще можно без вебсекитов обойтись?

[@DanMiller777]

жЫЫЫр!!!

[@МаратПавлович]

Спасибо за труды!!! Возник вопрос по поводу мутаций, обязательно ли декомпозировать массив чтобы обновить/добавить элемент, или можно безопасно использовать Vue.set()? На просторах пишут, что обновлять массив можно и методами splice, push из списка vuejs.org/v2/guide/list.html#Array-Change-Detection. Все варианты вроде работают, есть ли принципиальный выигрыш в использовании декомпозиции?

[@letsCodeDru]

Можно, но более канонично через создание нового. Весь js мир дружно чешет в сторону иммутабельности, т.к. это безопасней

[@АндрейЗахаров-я8б]

А когда мы будем делать csrf?

[@АлександрВелекий]

Спасибо за видео! А можешь сделать видео с настройкой кеширования?

[@letsCodeDru]

Могу. Сделаю. По срокам не знаю когда

[@АлександрВелекий]

@@letsCodeDru , а может подскажешь как исправить. Не получилось настроить кэширование. Пишет, что необходимо серелизовать PersistenceExceptionTranslationInterceptor.

[@ekhodzitsky]

Андрей! Докер есть в планах? Например на основе статьи spring.io/guides/gs/spring-boot-docker/ записать что-то + добавить своих сакральных знаний ) Завернуть sweater например в него.

[@letsCodeDru]

Планируется. По срокам не скажу)

[@alimirzahan4488]

Всем привет! Поправьте если туплю, скажу след. Если у вас: 1) duplicated keys error 2) удаляется/добавляется больше чем 1 3) Vuex devtools пишет по два Mutation за нажатие то закомментируйте все MessageMutation-ы в App.vue в switch-е, так handler не будет работать и отрабатывать будет только messageApi

[@karfogengroup807]

Если ошибка Uncaught TypeError: Object(...) is not a function Надо добавить версию как у автора yarn add vuex@^3.0.1

[@borymskyi]

долго игрался, хотел использовать новую версию, но ничего не вышло... похоже vue 3 не контачит с ласт vuex... пришлось перейти на старую версию 3.0.1

[@mizantropoff]

Давайте еще версиями себя ограничивать. Я не пойму, тут парограммисты, те кто хочет быть программистом, или хрень какая то сидит? С таким подходом эти видео скоро станут совсем неактуальны. В основе "обучения" - сплошной копипаст. Только привязывание теории и понимания того, что ты делаешь, дает возможность миграции на свежии версии фрейморков, которые все дальше и дальше, как в прочем, и сама Java. Жаль. Столько труда - и все скоро просто расстворится

[@Sergey111111]

Хотелось быузнать аналогичные команды для nmp,а то у меня винда, на ней ярн при импорте выдает ошибку, что невозможно подсоединиться к репозиторию.На гите разаработчиком написано, что это баг. П.С. С Новым Годом и спасибо за видосы!

[@letsCodeDru]

npm i - - save vuex npm i - - save @babel/polyfill

[@nilovss]

Можете изменить репозиторий yarn на репозиторий npm в настройках yarn. И проблема уйдет. В том числе, если используется proxy.

[@phpusr]

Никак не пойму зачем создавать новый объект в мутациях, если и при изменении старого все работает?

[@phpusr]

Изменение старого объекта: mutations: { addMessageMutation(state, message) { state.messages.push(message); }, updateMessageMutation(state, message) { const index = state.messages.findIndex(item => item.id === message.id); state.messages.splice(index, 1, message); }, removeMessageMutation(state, message) { const index = state.messages.findIndex(item => item.id === message.id); if (index > -1) { state.messages.splice(index, 1); } }, },

[@phpusr]

Создание нового объекта из старого с изменениями: mutations: { addMessageMutation(state, message) { state.messages = [...state.messages, message]; }, updateMessageMutation(state, message) { const index = state.messages.findIndex(item => item.id === message.id); state.messages = [...state.messages.slice(0, index), message, ...state.messages.slice(index + 1)] }, removeMessageMutation(state, message) { const index = state.messages.findIndex(item => item.id === message.id); if (index > -1) { state.messages = [ ...state.messages.slice(0, index), ...state.messages.slice(index + 1) ] } }, },

[@phpusr]

Ответ здесь: ru.vuejs.org/v2/guide/list.html#%D0%9C%D0%B5%D1%82%D0%BE%D0%B4%D1%8B-%D0%B2%D0%BD%D0%B5%D1%81%D0%B5%D0%BD%D0%B8%D1%8F-%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B9

[@АндрейНемобатор]

@@phpusr Я тоже на этом месте удивился таким причудливым решениям, вместо привычных методов. Однако я не знал что vue обернул эти методы, избавив от таких заморочек.

[@nilovss]

Серия уроков крутая! Есть ли возможность поддержать проект, кроме Patreon?

[@letsCodeDru]

Ну до кнопки "поддержать канал" я пока не дорос) Буду признателен за привлечение аудитории и популяризации канала любыми методами :)

[@nilovss]

@@letsCodeDru Я к тому, что Patreon предполагает ежемесячную подписку. Это отпугивает потенциальных жертвователей. Было бы круто иметь канал разовых пожертвований. Финансовая поддержка - самый лучший мотив заниматься дальше.

[@letsCodeDru]

@@nilovss да, понимаю. Пририсовал в описании к каналу ссылки на Яндекс.Деньги и PayPal

[@nilovss]

letsCode надеюсь, что в описаниях к видео, эта информация тоже появится :) Поддержал!

[@letsCodeDru]

@@nilovss Огромное спасибо) ре-активал подписку на Premiere Pro, монтаж определённо станет проще :)

[@ivanyuyukin2900]

Два видео за неделю?

[@letsCodeDru]

Зачастил? Сбавить обороты? 😁

[@ivanyuyukin2900]

@@letsCodeDru Не Андрей не надо)) С наступающим)

[@mikhailsviryd7129]

Vue сам отправляет запрос на получение messages: store.js: ... state: { messages: [] }, ... mutations: { ... getMessageMutation(state, data){ state.messages = data } }, actions: { ... async getMessageAction({commit}){ const result = await messagesApi.get() const data = await result.data if (result.ok) { commit('getMessageMutation', data) } } } main.js: ... new Vue({ ... created() { this.$store.dispatch('getMessageAction') }, })