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