Необходимо было использовать Vuex в своей программе, но никак не выходило. Наткнулся на видео и теперь все работает, как надо. Очень благодарен автору.
На самом деле первый пример сделать без vuex элементарно. Создать отдельный экземпляр. window.Events = new Vue(). Затем можно в любом месте приложения делать Events.$emit(...) и отлавливать Events.$on(...)
Вот из-за таких объяснений работы Vuex в общем и Getters и Actions в частности, у новичков в голове каша. Getters. При чем здесь реактивность? State сам по себе реактивен. И getters нужны лишь для инкапсуляции (сокрытия) логики выборки данных из state. В компонентах пользуешься только getters и если в будущем структура state меняется, в коде компонентов менять ничего не придется, так как getters будут отдавать данные в том же виде, как раньше. Actions и асинхронность. Да это так, но про async/await забыли? async f() { await store.dispatch('name-getter-1', 'данные') await store.dispatch('name-getter-2') ...дальше идет код, выполняемый только после последовательного выполнения двух асинхронных getters. } И если в компонентах использовать только getters, в дальнейшем это позволяет без проблем добавлять сколь угодно сложную логику управления state в эти самые getters (включая асинхронные вызовы других getters) и не заморачиваться о том, какой вызов использовать в компоненте - синхронный или асинхронный. Везде await [getter] и все!
Тот самый момент когда из 1000 видео, решил написать коментарий в знак благодарности автору за Реально "годный" урок, с действительно понятным объяснением, спасибо!
А почему у Ostin переход по страницам сопровождается перезагрузкой страницы, а не переходом через Router? Перезагрузка страниц с SSR фактически теряет преимущества SPA и по сути особо нет преимуществ по сравнению с обычным сайтом на том же jQuery ....
Отлично! Только вот вопрос: как строиться файл store.js в реальных проектах? Все глобальные переменные выносятся в одну const store или разбиваются на разные константы или на разные файлы? Я имею ввиду когда пишем переменные для разных компонентов(надеюсь не запутал).
Использовать можно разбиенеие на файлы, как экшенов так и гетеров, стейтов и мутаций, а их ложить в отдельные папки т.е. на модули, подключать потом все в store/index.js
Потрясающий пример. Давайте вместо EventBus, будем засирать хранилище состоянием не относящимся к бизнес логике, и производя компонентам сайд эффекты, что, осложняет тестирование, и увеличивает когнитивную нагрузку экспоненциально, просто потому что нам лень пользоваться патерном наблюдателя, когда есть хайповый Vuex, с кейсами которого нам лень знакомиться.
У меня вопрос по сайту OSTIN. Вроде бы сайты на Вью получаются SPA, тоесть без перезагрузки всей страницы, а в OSTIN все как на обычном, при каждом переходе по ссылкам, страница полностью перезапускается. Это как сделано?
Spa это просто паттерн создания. Вид сайта если угодно. Спа может быть даже без vue. А vue это фреймворк. Короче каждый кодит так как он хочет и что он хочет
Всмысле получать с бекенда пункты? Можно вообще все что угодно. За асинхронность отвечают actions. Все что в них попадает - автоматом становится асинхронным
@@gofrontend2220 видимо немного не так вопрос задал, возможно ли в роутер засунуть маршруты из vuex, которые с бекенда прилетают через fetch, ес-но в экшене.
Евгений Крохин конечно можно. В роутере импортируете стор и массив ссылок и мапите (.map()). И уже не просто руками их прописываете. imporr store from “путь до store.js”. let paths = []. Paths.push( store.state.ссылки.map((item) => item)). const router = new Router({ routes: paths }). Примерно так можно
@@gofrontend2220 синтаксис писать не надо :) я знаю язык хорошо. Сейчас экспериментирую с этим. Вопрос в том, как отработает роутер, если точка входа будет по маршруту, который будет асинхроном загружаться. И произойдёт это уже позже, а следовательно отработает маска "*" с редиректом на 404
@@gofrontend2220 если я делаю импорт store в каждом компоненте отдельно, может ли быть в этом проблема? по идее же import ссылается на один и тот же объект
у меня только один вопрос - почему это не запилено изначально в этом вуе? что не новое поделие на жс, так потом опять какой-то костыль прикрутят когда уже дурачки поймут, что в 2021 писать компутеру человеческим языком это идиотизм и сделают что-то нормальное? браузеры уже весят как операционные системы 15 летней давности
Потому что тебе неправильно объяснили, что якобы без vuex нельзя сделать элементарные вещи. А на самом деле в большинстве сайтов использование vuex - признак неумения проектировать компоненты. Так что кто на самом деле дурачок - надо еще разобраться.
Это столько надо написать кода, чтобы по клику дропдавн показывать? Столько слоев абстракции на переменную-флаг... Жесть. А что будет в реальных проектах, там же тысячи строк кода .
Такое говно эти хранилища. Акции, мутаторы, гетеры. И всё с кучей строковых параметров. Мутатень жуткая. Не умеют ещё нормальных хранилищ делать. Нельзя преподносить это как нечто чудесное. Вы просто вынужденны использовать это уг из-за неимения чего-то лучшего, удобного.
Что делать еслп мне так же нужно отправить событие наверх, но у меня эти 3 элемента связаны в файле blade. Там же нельзя динамические атрибуты сделать? И вообще прочитают ли они мне их?
![[ВАЖНО - Читай описание] Vue.js компонент всплывающее модальное окно используя SLOT и $REFS](http://i.ytimg.com/vi/QWovG8nVbnA/mqdefault.jpg)
![[ВАЖНО - Читай описание] Vue.js компонент всплывающее модальное окно используя SLOT и $REFS](/img/tr.png)
![[ВАЖНО - Читай описание] PUSH-уведомления для web-сайта на Vue.js](http://i.ytimg.com/vi/1voPB5k0ZMY/mqdefault.jpg)
![[ВАЖНО - Читай описание] Таблица на Vue.js. VUEX+AXIOS+API. Пагинация и сортировка данных.](http://i.ytimg.com/vi/zntx4J9jnb0/mqdefault.jpg)
Спасибо! очень годно. Гораздо легче понимать ,когда автор приводит пример сначала без какой-то технологии, а затем с ней. Больше уроков требуем!))
Лучше описание (и обоснование) работы с Vuex, которое я встречал, включая англоязычные источники. Огромное спасибо автору.
спасибо огромное! начал изучать вью столкнулся с проблемой проброса событий, наткнулся на это видео и всё - картинка сложилась идеально!
Самое четкое объяснение на ютубе про Vuex! Люблю когда всё приводят на сравнении и с максимальным "разжевыванием", простыми словами. СПАСИБО!
Присоединюсь к коментам ниже: до меня наконец-то дошло) Просто, понятно и без воды. Спасибо)
Не понимал, как подключить стор к апп компоненте, но наконец нашел видео, в котором это показано) спасибо.
Считаю что это лучшее видео! Где объясняется Vuex. Спасибо огромное в голове стало светлее
Просто вишенка! Спасибо, за-ме-ча-те-льно
Спасибо огромное автору за полезную информацию и грамотные уроки ! Объясняете все понятно и доступно.
наконец то дошло зачем надо vuex, отлично объяснили, большое спасибо
Это топ!
Вы мою боль утолили.
Именно по этому вопросу весь день мучаюсь.
Прям в точку.
И подача супер.
Спасибо огромное.
Блин чувак. Твои уроки для самых маленьких. Спасибо, не врубался в Vuex, а тут все в мельчайших подробностях. Подписался.
Отличные уроки ! Спасибо вам ! Больше vue !
Очень хорошо объясняете. Спасибо! Захотелось пойти и написать что-нибудь с использованием Vuex после просмотра
Необходимо было использовать Vuex в своей программе, но никак не выходило. Наткнулся на видео и теперь все работает, как надо. Очень благодарен автору.
Огромное спасибо, после этого видоса наконец понял для чего нужен Vuex
Лучшее объяснение! Пересматривал несколько раз, все просто и доходчиво)
Сам преподаватель по вэб разработке, объяснение шикарное👍🏻👍🏻👍🏻
Замечательный урок! До этого посмотрел 3 других видео и только здесь кликнуло зачем это нужно. Спасибо!
посмотрите видео от javascript.ninja по вью 3, там расскажут почему не всегда нужен вьюкс, а иногда и вреден
Не успеваю за вашей мыслью. Надо еще потренироваться на 2,5 компонентах.
Александр Шейка повторение - мать учения:) все получится!
Лучшего объяснения на ютюбе не видел, спасибо
Лучшее объяснение Vuex'a!
Подписка и лайк с меня тебе коллега , единственный нормальный прогер
посмотрите видео от javascript.ninja по вью 3, там расскажут почему не всегда нужен вьюкс, а иногда и вреден
На самом деле первый пример сделать без vuex элементарно. Создать отдельный экземпляр. window.Events = new Vue(). Затем можно в любом месте приложения делать Events.$emit(...) и отлавливать Events.$on(...)
соглашусь, тоже не понял почему было сказано что "это бред" использованеи EventBus
Для конкретно данного примера используют event bus, и не будет вот этого конструктора лего
vuex нужен немного для других целей
Коротко и по делу. Жирный лайк!
Все просто и доходчиво, спасибо!)
Это лучшее видео про VUEX Спосибо!
самое простое объяснение с хорошим примером, только когда напутали мутации с действиями немного сбило))) а так лайк!
посмотрите видео от javascript.ninja по вью 3, там расскажут почему не всегда нужен вьюкс, а иногда и вреден
Вот из-за таких объяснений работы Vuex в общем и Getters и Actions в частности, у новичков в голове каша.
Getters. При чем здесь реактивность? State сам по себе реактивен. И getters нужны лишь для инкапсуляции (сокрытия) логики выборки данных из state. В компонентах пользуешься только getters и если в будущем структура state меняется, в коде компонентов менять ничего не придется, так как getters будут отдавать данные в том же виде, как раньше.
Actions и асинхронность. Да это так, но про async/await забыли?
async f() {
await store.dispatch('name-getter-1', 'данные')
await store.dispatch('name-getter-2')
...дальше идет код, выполняемый только после последовательного выполнения двух асинхронных getters.
}
И если в компонентах использовать только getters, в дальнейшем это позволяет без проблем добавлять сколь угодно сложную логику управления state в эти самые getters (включая асинхронные вызовы других getters) и не заморачиваться о том, какой вызов использовать в компоненте - синхронный или асинхронный. Везде await [getter] и все!
Спасибо вам за уроки!
Большое спасибо вам! Сам сейчас сижу изучаю Vue и ваше видео, как раз кстати))
Есть идея перенести свой сайт с портфолио на Vue.
Тот самый момент когда из 1000 видео, решил написать коментарий в знак благодарности автору за Реально "годный" урок, с действительно понятным объяснением, спасибо!
Thx it was amazing production-like sample!
По сути, vuex это решение проблемы, которое нам дает компонентный подход.
Самое сложно во Vue для меня был state manager, когда я освоил Vuex, то прямо почувствовал как разработка ускорилась! Без него никуда
Спасибо!
Спасибо, видео очень помогло!
Vuex ещё используется для регистрации/авторизации, хранение токенов
Спасибо! Теперь более понятно
Касаемо асинхронности она же тоже по очереди выполняется
Годнота!!!💜
спасибо дружище.
красавчик. жирный +
отлично
v-catalog-item не нужен геттерс только эшены геттерсы нужны там где конечный результат
По-моему вы перепутали понятия синхронности/асинхронности
Лайк однозначно
давайте урок с nuxt!
А почему у Ostin переход по страницам сопровождается перезагрузкой страницы, а не переходом через Router? Перезагрузка страниц с SSR фактически теряет преимущества SPA и по сути особо нет преимуществ по сравнению с обычным сайтом на том же jQuery ....
ssr и перезагрузка страниц абсолютно не причем, видимо в данном случае ротутинг не используется
странно, но у меня options: вызыало ошибку - писало, что ожидается ",". Убрал - заработало.
Отлично! Только вот вопрос: как строиться файл store.js в реальных проектах? Все глобальные переменные выносятся в одну const store или разбиваются на разные константы или на разные файлы? Я имею ввиду когда пишем переменные для разных компонентов(надеюсь не запутал).
Использовать можно разбиенеие на файлы, как экшенов так и гетеров, стейтов и мутаций, а их ложить в отдельные папки т.е. на модули, подключать потом все в store/index.js
Через шину событий можно сделать и будет норм
Сори за вопрос не по теме, а что за IDE у автора? Что-за редактор кода? Тоже хочу установить
Добрый день, что-то у меня не запускается приложение из вашего репозитория? одни ошибки(((
Thanks!
Потрясающий пример. Давайте вместо EventBus, будем засирать хранилище состоянием не относящимся к бизнес логике, и производя компонентам сайд эффекты, что, осложняет тестирование, и увеличивает когнитивную нагрузку экспоненциально, просто потому что нам лень пользоваться патерном наблюдателя, когда есть хайповый Vuex, с кейсами которого нам лень знакомиться.
А почему нельзя просто кинуть в root emit с событием, а потом его же отловить в дочерних компонентах?
побольше по vue
У меня вопрос по сайту OSTIN. Вроде бы сайты на Вью получаются SPA, тоесть без перезагрузки всей страницы, а в OSTIN все как на обычном, при каждом переходе по ссылкам, страница полностью перезапускается. Это как сделано?
Spa это просто паттерн создания. Вид сайта если угодно. Спа может быть даже без vue. А vue это фреймворк. Короче каждый кодит так как он хочет и что он хочет
Через vue-роутеры например.
Почему детские элементы?)) Есть слово "дочерние"
У меня почему-то не работает vuex, пока я не посмотрю на нужный компонент в devtools. What the f?
! ВАЖНО - Читайте описание к видео ! 🔥🔥🔥👆👆👆
Скажите а будет полный курс вью в связке с нод ?
TheBorninmotion нет не будет
@@gofrontend2220 чисто фронт ?
TheBorninmotion агась:)
Как-то можно фетчить данные асинхроном для пунктов меню во vuex, чтобы потом рисовать меню для vue route и чтобы всё работало?
Всмысле получать с бекенда пункты? Можно вообще все что угодно. За асинхронность отвечают actions. Все что в них попадает - автоматом становится асинхронным
@@gofrontend2220 видимо немного не так вопрос задал, возможно ли в роутер засунуть маршруты из vuex, которые с бекенда прилетают через fetch, ес-но в экшене.
Евгений Крохин конечно можно. В роутере импортируете стор и массив ссылок и мапите (.map()). И уже не просто руками их прописываете. imporr store from “путь до store.js”. let paths = []. Paths.push( store.state.ссылки.map((item) => item)). const router = new Router({ routes: paths }). Примерно так можно
Евгений Крохин мог где то ошибиться. Писал с телефона
@@gofrontend2220 синтаксис писать не надо :) я знаю язык хорошо. Сейчас экспериментирую с этим. Вопрос в том, как отработает роутер, если точка входа будет по маршруту, который будет асинхроном загружаться. И произойдёт это уже позже, а следовательно отработает маска "*" с редиректом на 404
Vuex не включили чтобы на каждом углу говорить наш фреймворк самый крутой потому что он весит 10kb.
Подскажите, пожалуйста, в чем может быть проблема, при клике меняется state только в одном из компонентов
prnt.sc/s3b03v
prnt.sc/s3b0ip
Tanya Hryf похоже что это баг в вью тулзах. Попробуйте в консоль выводить этот стейт. Просто такого быть не может.
@@gofrontend2220 если я делаю импорт store в каждом компоненте отдельно, может ли быть в этом проблема? по идее же import ссылается на один и тот же объект
Tanya Hryf а зачем вы так делаете? В main.js достаточно 1 раз проимпортировать и все.
у меня только один вопрос - почему это не запилено изначально в этом вуе?
что не новое поделие на жс, так потом опять какой-то костыль прикрутят
когда уже дурачки поймут, что в 2021 писать компутеру человеческим языком это идиотизм и сделают что-то нормальное?
браузеры уже весят как операционные системы 15 летней давности
Потому что тебе неправильно объяснили, что якобы без vuex нельзя сделать элементарные вещи. А на самом деле в большинстве сайтов использование vuex - признак неумения проектировать компоненты.
Так что кто на самом деле дурачок - надо еще разобраться.
Уже pinia
хз зачем это надо, когда есть mobx
посмотрите видео от javascript.ninja по вью 3, там расскажут почему не всегда нужен вьюкс, а иногда и вреден
Это столько надо написать кода, чтобы по клику дропдавн показывать? Столько слоев абстракции на переменную-флаг... Жесть. А что будет в реальных проектах, там же тысячи строк кода .
Еслинт просто за......бет нахрен.... лучше жить без него!!!
нафиг vuex, mobx топ!
Такое говно эти хранилища. Акции, мутаторы, гетеры. И всё с кучей строковых параметров. Мутатень жуткая. Не умеют ещё нормальных хранилищ делать.
Нельзя преподносить это как нечто чудесное. Вы просто вынужденны использовать это уг из-за неимения чего-то лучшего, удобного.
Если что то неудобно использовать - это первый звоночек, что ты его используешь не по назначению.
отлично
Что делать еслп мне так же нужно отправить событие наверх, но у меня эти 3 элемента связаны в файле blade. Там же нельзя динамические атрибуты сделать?
И вообще прочитают ли они мне их?