[ВАЖНО - Читай описание] Vue. Программная смена состояния приложения через VUEX
HTML-код
- Опубликовано: 24 янв 2020
- --------------------------------------------------------------------------------------------------------------------------------------------------------
ВАЖНО - Видео на этом канале 3х летней давности и большинство уже НЕАКТУАЛЬНЫЕ в силу изменения синтаксиса, методов и подходов во Vue.js версии 3. Все видео были записаны на Vue.js версии 2. Много чего уже просто НЕ БУДЕТ РАБОТАТЬ или выдаст ошибки.
Новый канал на актуальном стеке Vue.js v3, Pinia, Vue router@next, Ionic (мобильные приложения), FireBase (база данных, аутентификация и тд) - / @intothecoding
НО! Новый канал ведется на АНГЛИЙСКОМ ЯЗЫКЕ - так что у вас есть уникальная возможность научиться кодить и подтянуть язык - так как Английский нужен всегда!
Жду вас на новом канале!
--------------------------------------------------------------------------------------------------------------------------------------------------------
В этом видео разберем как управлять состоянием приложения и его элементов через центральное хранилище VUEX, в зависимости от ширины экрана пользователя
Урок по VUEX: • [ВАЖНО - Читай описани...
Урок по созданию SELECT'а: • [ВАЖНО - Читай описани...
Приятного просмотра!
![[ВАЖНО - Читай описание] Vue.js. Фильтрация товаров по цене через ползунки (range slider)](http://i.ytimg.com/vi/O6j2k1p5MXw/mqdefault.jpg)
![[ВАЖНО - Читай описание] Vue.js. Фильтрация товаров по цене через ползунки (range slider)](/img/tr.png)
![[ВАЖНО - Читай описание] Почему вы просто обязаны использовать VUEX в своем приложении!](http://i.ytimg.com/vi/5lBf-Fm4io4/mqdefault.jpg)
![[ВАЖНО - Читай описание] Получение значений из URL Vue.js. $router.query](http://i.ytimg.com/vi/skFfjI0JUEo/mqdefault.jpg)
![[ВАЖНО - Читай описание] Vue.js компонент всплывающее модальное окно используя SLOT и $REFS](/img/1.gif)
Жаль, что вы не выпускаете новые видео. Очень хорошо объясняете.
делал мобильную версию для сайта на работе, которая оч сильно отличалась от десктопа, и от app всё спускал пропсами. Получилось не очень) давно уже думаю как переделать, и пройдя видеоуроки по созданию магаза наткнулся и на этот ролик. Круто, спасибо! Лучшие уроки в ютубе по вью.
С удовольствием посмотрел бы продолжение этого ролика, где таки до конца реализовано бургер-меню . Все работает - спасибо
! ВАЖНО - Читайте описание к видео ! 🔥🔥🔥👆👆👆
а если в ед лисенер поставить стрелочную функцию то разве проблема с this не решится?
Это оказалось удобным, если в сразу присвоить имена всем размерам ( _как в bootstrap_ ). Передавать сразу имена и использовать из геттера, где надо.
Осталось только _let vm = this;_ , пока так и не понял чем его этот _this_ там не устраивает
Просмотрел и сделал то же самое, все работает, спасибо, только в консоли я почему-то получаю десктоп или мобайл, но никаких тру как в видео не получаю
Где-то ошибка у вас. Надо переловатить весь код. Возможно где-то написали desctop вместо desktop, или что-то подобное. У меня тоже была масса мелких ошибок, перпроверил и все заработло как в видео
Можете мне скинуть ваши исходники, я пересмотрю
Как Вы считаете, третья версия вью будет сильно отличаться от второй? И то, что все будет переписано на typescript, сильно повлияет на порог вхождения в этот фреймворк. Я имею ввиду стоит ли учить typescript для понимания вью или js будет достаточно на первое время?
Спасибо за Ваши видео! Выздоравливайте!!
Андрей StT ну на typescript будет написан сам vue, поэтому вы как фронтенд не будете никак с typescript’ом взаимодействовать, если только в исходники не полезете:) От второй будет отличаться достаточно сильно вроде, но в лучшую сторону. Не думаю что для тех кто работал со 2 vue испытают какие то трудности при переходе на 3. В конце концов у vue обратная совместимость, так что привычный функционал vue2 будет так же работать и на vue3
@@gofrontend2220 ,Благодарю за ответ)
Начал смотреть это видео и остановился после примера с Остином. Не могу понять практическую пользу от такого подхода. Ведь существует адаптивная верстка, которая нам не запрещает работать с медиа выражениями и получить идентичный результат. Буду искренне благодарен за разъяснения.
а можно с помощью вью вообще не пользоваться css?
К сожалению такой подход не гибок к конкретной задаче. К примеру мне не нравиться , что открыт select(все варианты выбора) при экране более 767px, при этом убрать выборку уже не могу. На много удачнее было бы, если бы она работала динамично, к примеру если не открыл значит она и не открылась, а если открыл, то она убралась при сужении экрана. А так она живёт своей жизнью.
Вася Иванов она живет жизнью ей продиктованной:) хотите сделать по вашему - просто уберите условие что isExpanded в случае isDesktop. А потом чтобы закрыть при isMobile можете поставить watch в самом компоненте селекта и в момент, когда геттер isMobile сменится на true и у вас будет на этот момент isExpanded true - смените его на обратное. Надо именно следить за сменой мобайл, иначе в мобилке будет всегда закрыт
Это не работает для моб. так как когда ты открываешь приложение в мобилке, ты не производишь `resize` поэтому не срсабатывает ивент на resize....
Что в принципе логично
так а в чем проблема, вынести в отдельный метод функцию после 'resize' и вызвать её принудительно в mounted, например, до addEventListener
Жесть какая-то! Столько кода для простого скрыть/показать. Я все таки до конца не понимаю, зачем это пихать в vuex?
Не, ну можно и во vuex запихать, но сделать можно все реально короче. Можно было одним флагом isMobile ограничиться)