[ВАЖНО - Читай описание] Почему вы просто обязаны использовать VUEX в своем приложении!
HTML-код
- Опубликовано: 27 янв 2020
- --------------------------------------------------------------------------------------------------------------------------------------------------------
ВАЖНО - Видео на этом канале 3х летней давности и большинство уже НЕАКТУАЛЬНЫЕ в силу изменения синтаксиса, методов и подходов во Vue.js версии 3. Все видео были записаны на Vue.js версии 2. Много чего уже просто НЕ БУДЕТ РАБОТАТЬ или выдаст ошибки.
КОНКРЕТНО ЭТО ВИДЕО ВООБЩЕ НЕ ИМЕЕТ БОЛЬШЕ СМЫСЛА, ТАК КАК САМ СОЗДАТЕЛЬ VUE.js рекоммендует использовать PINIA вместо VUEX.
Новый канал на актуальном стеке Vue.js v3, Pinia, Vue router@next, Ionic (мобильные приложения), FireBase (база данных, аутентификация и тд) - / @intothecoding
НО! Новый канал ведется на АНГЛИЙСКОМ ЯЗЫКЕ - так что у вас есть уникальная возможность научиться кодить и подтянуть язык - так как Английский нужен всегда!
Жду вас на новом канале!
--------------------------------------------------------------------------------------------------------------------------------------------------------
В этом видео я расскажу почему вы просто обязаны научиться пользоваться VUEX для разработки на Vue.js. Поверьте, это очень просто и очень полезно!
Ссылка на репозиторий с кодом из урока: github.com/antonboltnev/vuex-app
Приятного просмотра!
![[ВАЖНО - Читай описание] PUSH-уведомления для web-сайта на Vue.js](http://i.ytimg.com/vi/1voPB5k0ZMY/mqdefault.jpg)
![[ВАЖНО - Читай описание] PUSH-уведомления для web-сайта на Vue.js](/img/tr.png)
![[ВАЖНО - Читай описание] Поиск по каталогу с главной страницы Vue js магазина](http://i.ytimg.com/vi/1pay8z5-QfM/mqdefault.jpg)
Спасибо! очень годно. Гораздо легче понимать ,когда автор приводит пример сначала без какой-то технологии, а затем с ней. Больше уроков требуем!))
Просто вишенка! Спасибо, за-ме-ча-те-льно
Лучше описание (и обоснование) работы с Vuex, которое я встречал, включая англоязычные источники. Огромное спасибо автору.
спасибо огромное! начал изучать вью столкнулся с проблемой проброса событий, наткнулся на это видео и всё - картинка сложилась идеально!
Самое четкое объяснение на ютубе про Vuex! Люблю когда всё приводят на сравнении и с максимальным "разжевыванием", простыми словами. СПАСИБО!
наконец то дошло зачем надо vuex, отлично объяснили, большое спасибо
Присоединюсь к коментам ниже: до меня наконец-то дошло) Просто, понятно и без воды. Спасибо)
Отличные уроки ! Спасибо вам ! Больше vue !
Это топ!
Вы мою боль утолили.
Именно по этому вопросу весь день мучаюсь.
Прям в точку.
И подача супер.
Спасибо огромное.
Считаю что это лучшее видео! Где объясняется Vuex. Спасибо огромное в голове стало светлее
Спасибо вам за уроки!
Спасибо огромное автору за полезную информацию и грамотные уроки ! Объясняете все понятно и доступно.
Не понимал, как подключить стор к апп компоненте, но наконец нашел видео, в котором это показано) спасибо.
Лучшее объяснение! Пересматривал несколько раз, все просто и доходчиво)
Блин чувак. Твои уроки для самых маленьких. Спасибо, не врубался в Vuex, а тут все в мельчайших подробностях. Подписался.
Все просто и доходчиво, спасибо!)
Спасибо! Теперь более понятно
Лучшего объяснения на ютюбе не видел, спасибо
Спасибо, видео очень помогло!
Замечательный урок! До этого посмотрел 3 других видео и только здесь кликнуло зачем это нужно. Спасибо!
посмотрите видео от javascript.ninja по вью 3, там расскажут почему не всегда нужен вьюкс, а иногда и вреден
Коротко и по делу. Жирный лайк!
Очень хорошо объясняете. Спасибо! Захотелось пойти и написать что-нибудь с использованием Vuex после просмотра
Сам преподаватель по вэб разработке, объяснение шикарное👍🏻👍🏻👍🏻
Большое спасибо вам! Сам сейчас сижу изучаю Vue и ваше видео, как раз кстати))
Есть идея перенести свой сайт с портфолио на Vue.
Лучшее объяснение Vuex'a!
спасибо дружище.
Thx it was amazing production-like sample!
Огромное спасибо, после этого видоса наконец понял для чего нужен Vuex
Необходимо было использовать Vuex в своей программе, но никак не выходило. Наткнулся на видео и теперь все работает, как надо. Очень благодарен автору.
Спасибо!
Это лучшее видео про VUEX Спосибо!
Вот из-за таких объяснений работы 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] и все!
Годнота!!!💜
Подписка и лайк с меня тебе коллега , единственный нормальный прогер
посмотрите видео от javascript.ninja по вью 3, там расскажут почему не всегда нужен вьюкс, а иногда и вреден
Лайк однозначно
Thanks!
На самом деле первый пример сделать без vuex элементарно. Создать отдельный экземпляр. window.Events = new Vue(). Затем можно в любом месте приложения делать Events.$emit(...) и отлавливать Events.$on(...)
соглашусь, тоже не понял почему было сказано что "это бред" использованеи EventBus
отлично
самое простое объяснение с хорошим примером, только когда напутали мутации с действиями немного сбило))) а так лайк!
посмотрите видео от javascript.ninja по вью 3, там расскажут почему не всегда нужен вьюкс, а иногда и вреден
красавчик. жирный +
Не успеваю за вашей мыслью. Надо еще потренироваться на 2,5 компонентах.
Александр Шейка повторение - мать учения:) все получится!
Для конкретно данного примера используют event bus, и не будет вот этого конструктора лего
vuex нужен немного для других целей
По сути, vuex это решение проблемы, которое нам дает компонентный подход.
Тот самый момент когда из 1000 видео, решил написать коментарий в знак благодарности автору за Реально "годный" урок, с действительно понятным объяснением, спасибо!
Отлично! Только вот вопрос: как строиться файл store.js в реальных проектах? Все глобальные переменные выносятся в одну const store или разбиваются на разные константы или на разные файлы? Я имею ввиду когда пишем переменные для разных компонентов(надеюсь не запутал).
Использовать можно разбиенеие на файлы, как экшенов так и гетеров, стейтов и мутаций, а их ложить в отдельные папки т.е. на модули, подключать потом все в store/index.js
Сори за вопрос не по теме, а что за IDE у автора? Что-за редактор кода? Тоже хочу установить
! ВАЖНО - Читайте описание к видео ! 🔥🔥🔥👆👆👆
Что делать еслп мне так же нужно отправить событие наверх, но у меня эти 3 элемента связаны в файле blade. Там же нельзя динамические атрибуты сделать?
И вообще прочитают ли они мне их?
Самое сложно во Vue для меня был state manager, когда я освоил Vuex, то прямо почувствовал как разработка ускорилась! Без него никуда
странно, но у меня options: вызыало ошибку - писало, что ожидается ",". Убрал - заработало.
Vuex ещё используется для регистрации/авторизации, хранение токенов
Касаемо асинхронности она же тоже по очереди выполняется
побольше по vue
А почему нельзя просто кинуть в root emit с событием, а потом его же отловить в дочерних компонентах?
давайте урок с nuxt!
У меня вопрос по сайту OSTIN. Вроде бы сайты на Вью получаются SPA, тоесть без перезагрузки всей страницы, а в OSTIN все как на обычном, при каждом переходе по ссылкам, страница полностью перезапускается. Это как сделано?
Spa это просто паттерн создания. Вид сайта если угодно. Спа может быть даже без vue. А vue это фреймворк. Короче каждый кодит так как он хочет и что он хочет
Через vue-роутеры например.
Через шину событий можно сделать и будет норм
По-моему вы перепутали понятия синхронности/асинхронности
Скажите а будет полный курс вью в связке с нод ?
TheBorninmotion нет не будет
@@gofrontend2220 чисто фронт ?
TheBorninmotion агась:)
А почему у Ostin переход по страницам сопровождается перезагрузкой страницы, а не переходом через Router? Перезагрузка страниц с SSR фактически теряет преимущества SPA и по сути особо нет преимуществ по сравнению с обычным сайтом на том же jQuery ....
ssr и перезагрузка страниц абсолютно не причем, видимо в данном случае ротутинг не используется
Как-то можно фетчить данные асинхроном для пунктов меню во 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
v-catalog-item не нужен геттерс только эшены геттерсы нужны там где конечный результат
Добрый день, что-то у меня не запускается приложение из вашего репозитория? одни ошибки(((
Подскажите, пожалуйста, в чем может быть проблема, при клике меняется state только в одном из компонентов
prnt.sc/s3b03v
prnt.sc/s3b0ip
Tanya Hryf похоже что это баг в вью тулзах. Попробуйте в консоль выводить этот стейт. Просто такого быть не может.
@@gofrontend2220 если я делаю импорт store в каждом компоненте отдельно, может ли быть в этом проблема? по идее же import ссылается на один и тот же объект
Tanya Hryf а зачем вы так делаете? В main.js достаточно 1 раз проимпортировать и все.
Уже pinia
Потрясающий пример. Давайте вместо EventBus, будем засирать хранилище состоянием не относящимся к бизнес логике, и производя компонентам сайд эффекты, что, осложняет тестирование, и увеличивает когнитивную нагрузку экспоненциально, просто потому что нам лень пользоваться патерном наблюдателя, когда есть хайповый Vuex, с кейсами которого нам лень знакомиться.
У меня почему-то не работает vuex, пока я не посмотрю на нужный компонент в devtools. What the f?
Почему детские элементы?)) Есть слово "дочерние"
у меня только один вопрос - почему это не запилено изначально в этом вуе?
что не новое поделие на жс, так потом опять какой-то костыль прикрутят
когда уже дурачки поймут, что в 2021 писать компутеру человеческим языком это идиотизм и сделают что-то нормальное?
браузеры уже весят как операционные системы 15 летней давности
Потому что тебе неправильно объяснили, что якобы без vuex нельзя сделать элементарные вещи. А на самом деле в большинстве сайтов использование vuex - признак неумения проектировать компоненты.
Так что кто на самом деле дурачок - надо еще разобраться.
Vuex не включили чтобы на каждом углу говорить наш фреймворк самый крутой потому что он весит 10kb.
хз зачем это надо, когда есть mobx
посмотрите видео от javascript.ninja по вью 3, там расскажут почему не всегда нужен вьюкс, а иногда и вреден
Еслинт просто за......бет нахрен.... лучше жить без него!!!
Это столько надо написать кода, чтобы по клику дропдавн показывать? Столько слоев абстракции на переменную-флаг... Жесть. А что будет в реальных проектах, там же тысячи строк кода .
нафиг vuex, mobx топ!
Такое говно эти хранилища. Акции, мутаторы, гетеры. И всё с кучей строковых параметров. Мутатень жуткая. Не умеют ещё нормальных хранилищ делать.
Нельзя преподносить это как нечто чудесное. Вы просто вынужденны использовать это уг из-за неимения чего-то лучшего, удобного.
Если что то неудобно использовать - это первый звоночек, что ты его используешь не по назначению.
отлично