Все о Vuex за 30 минут. Что такое Vuex. Как работает Vuex

Получить профессию Frontend разработчика -
bit.ly/4bWxhVZ
Подробнее узнать об обучении в Result School -
bit.ly/3A8fUBg
Бесплатный курс HTML & CSS - bit.ly/3TfWsvj
Сделать 5 проектов на JavaScript - bit.ly/3SVyYu5
Я в соц сетях:
Telegram: t.me/js_by_vladilen
VK: vladilen.minin
Instagram: / vladilen.minin
Мои паблики по JavaScript:
Telegram: t.me/result_school_it
VK: result.school
Instagram: / result.scho. .
JavaScript cообщества:
Discord: / discord
Telegram: t.me/js_by_vladilen_chat
Roadmap по каналу:
vladilen.notion.site/Roadmap-...
В видео я расскажу про то, что такое Vuex и как им пользоваться.
Вы узнаете про actions, mutations, getters, state, modules. В результате напишите приложение
В видео я покажу, как пользоваться vue-devtools для отслеживания изменений в Vuex
Исходный код:
drive.google.com/open?id=1BBC...
Все о Vuex за 30 минут. Что такое Vuex. Как работает Vuex

[@vadvoker]

Четко. Работаю на рекате, сейчас разбираюсь с Vue, посмотрел твои два урока и картинка сразу в голове сложилась, спасибо, от души!

[@fhghfhfghfghf6814]

вы прекрасны. если бы еще был урок с бэком настоящим,то было бы вообще превосходно

[@mrrobot7387]

очень крутые уроки по vue. я использовал React, но сейчас на работе нужен vue, по твоим видео + шикарной документации vue очень легко разобраться с работой фреймворка. спасибо большое)

[@serg8483]

Лучшего объяснения я нигде не видел. Я думаю, вы занимаетесь тем, что вам дано от рождения. Удачи и процветанию вашему бизнесу!

[@user-vg9mj6eo7e]

Очень доступно все показано. Вроде все понятно, но надо еще несколько раз пересмотреть и попробовать самому что-нибудь получить и добавить, только уже обращаясь к бэкенду

[@unknownWakeborder]

С Реакта внезапно перешел на Vue. И теперь любая инфа по нему очень актуальна) Спасибо за полезную инфу!

[@masturch99f]

Огромное тебе спасибо! Всё объяснено просто отлично, так еще и на родном русском)

[@nicksimmons4722]

спасибо большое, очень развернуто и четко объяснил сходу лайк)

[@web8845]

Спасибо, Владилен! Дейсвительно, наконец-то понял Vuex 😎👍

[@user-io2eg8nh4v]

Замечательное видео - чёткое и последовательное! Спасибо большое!

[@romko-romario]

Видео супер, всё изложено компактно и информативно. Вернулся к нему после 1,5 месяца работы на проекте с редаксом, и зашло отлично, хотя несколько месяцев ранее было сложновато. Новичкам нужно поподробнее, но вот кто уже работал с другими сторами - лучшего туториала для быстрого освоения Vuex просто не найти.

[@andriihelever1793]

Спасибо за видосик, очень интересно

[@antonb6831]

Вай, от души благодарю тебя за хорошее видео, брат!) Действительно, вроде ничего сильно сложного нету, но нужно привыкнуть ко всему этому "производственному циклу" с геттерами, мутациями, стейтом и прочим...а тут нужна практика только..

[@Ya-GalinaVyacheslavovna]

Вай все тут красавчики, братуха, от души прям салам, жи есть!

[@antonbilichenko1312]

@@Ya-GalinaVyacheslavovna уай, от души в душу по братски, брат!

[@Ya-GalinaVyacheslavovna]

@@antonbilichenko1312 баркалла, братка!

[@VladilenMinin]

🔗 Курс по Vue 3: clc.to/vue3course 🔗 Максимально подробно про курс тут: t.me/vue3bot

[@user-zg4ef9in6s]

Отличные уроки на ютуб и курсы на юдеми :) спасибо за труд

[@user-ti9jw3im1p]

Супер! спасибо, все очень доступно

[@VladilenMinin]

Теперь стало понятней с Vuex ?)

[@CorleoneMikele]

Нет, стало еще более запутанно чем было )) В редаксе проще.

[@VladilenMinin]

@@CorleoneMikele Редакс намного сложнее. Ты просто к нему привык

[@VladilenMinin]

@Junior front-end developer По ngrx у меня был отдельный курс где-то)

[@user-rb2lk3nj9r]

Интересно былo бы увидеть урок по взаимодействию vuex + vue-router

[@germanshvetsov3076]

Владилен Минин , все здорово, я бы наверное только добавил, что при использовании mapGetters или чего-то ещё map... можно первым параметром передавать конкретный модуль, а вторым псевдонимы с названиями конкретных методов. Но, может, это запутывает логику и такое редко применяется.

[@sergey4879]

Очень круто и доступно. Спасибо большое за ваш труд!

[@x-bit5193]

Спасибо, очень хорошо и понятно объяснил.

[@sayidabbosurayimov6044]

Видео просто супер. Владилен Минин вы объясняйте гениально 👍. Делайте ещё много видео по Вуе. Я бы поставил 10000000000000 лайков. Замечательно👍👍👍👍👍

[@elchinkocharli8832]

Отличное видео! Все очень четко разложенно по полочкам! Спасибо!

[@IvanYarmots]

очень хорошее объяснение! спасибо!

[@Vlad-em1bx]

Отличный урок!

[@nickpolishchuk5635]

Большое спасибо! лучшие туториалы на рус по vue

[@mariagileto2223]

очень помогло видео в работе, спасибо большое

[@taran_dm]

Это было полезно. Спасибо!

[@dostonasadov6444]

Очень доходчиво объясняете спасибо большое

[@angelinadorasheva5828]

Спасибо за видео! Все на высоте как и всегда!

[@viT-1]

Благодарю за лекцию. Но было бы интересно посмотреть как vuex может взаимодействовать с vue-router для фильтрации данных.

[@user-zb7ij3gg5s]

Братан, спасибо, очень помог!

[@soulwind7577]

Отличная лекция, четко по делу, без лишнего мусора, что бы научиться базово работать с vuex хватило 1го раза. Большое спасибо за контент

[@quem6917]

Круто!!! Спасибо. 30 мин и все знаешь))

[@shtas89]

Спасибо хорошее объяснение. Столкнулся с проблемой когда было несколько модулей( у тебя 1 в примере). И не понял как в одном модуле вызвать мутацию из другого модуля. Не получилось в мутации получать глобальный state. Доступен только локальный state модуля. Подскажешь что можно сделать?

[@kirillgavrilov9681]

Очень классно объяснил 👏🏻 Спасибо!

[@trustambassador]

Спасибо за видео, супер.

[@step55555]

наконецто нашел нормальное обьяснение. с чувством, толком, расстановкой

[@kumpliko]

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

[@user-gy3rm9hf7m]

Замечательное видео!!! Сделай еще урок "полный сайт с vue vue-router vuex" думаю всем понравиться!!! а сам урок самый понятный из всех

[@VladilenMinin]

На канале целый плейлист с созданием срм системы на вью

[@user-gy3rm9hf7m]

@@VladilenMinin а можно с vuex тоже))

[@RuportOnTable]

Очень классный урок! Такой вопрос в мутейшенах менять напрямую поля стейт это точно хорошая идея? В редуксе всегда создаётся новый объект и тем самым поддерживается иммутабельность.

[@user-xw3ek8sf9t]

Как всегда отличное видео

[@smokvin]

Спасибо!

[@alinashtanko7159]

Пока красила ноготочки, успела изучить vuex, спасибо )) больше не будет мусора в компонентах, он будет в сторе )

[@Vlad-em1bx]

посмотрел урок подписался отлично, спасибо

[@VladilenMinin]

Добро пожаловать)

[@Vlad-em1bx]

:)

[@vinewu7557]

1:42 - Спасибо все понятно. Все же крайне очевидно. И развёрнуто объяснять схему не нужно) просто прочитаю то что нарисовано, а вы там сами как нибудь уже)

[@k0n4enbli]

Восхитительно! Как раз по работе на этом голову сломал, а тут такое чёткое и лаконичное объяснение. Огромное спасибо!

[@abdulovdb]

По сути очень качественно подана информация. По сути лайк, по сути подписка, по сути комментарий и на этом как бы и все P.S. Без обид 😅

[@sergeybakai7133]

Спасибо за толковые уроки, хотелось бы ещё узнать как сделать авторизацию с помощью токена и Local Stoage...и Vue естественно)

[@JuiKoloshi]

Делаю прямо сейчас :D

[@dx8026]

Для старта очень даже хватит. Удачи друг.

[@antonkleshnev5342]

Замечательное видео, многое стало понятно, Спасибо!!!

[@AlexandrSpirit]

Огромное спасибо. Многое стало понятно. Подскажите, для добавления нового поста, мы обращаемся напрямую к мутации. Если делать через асинхронный эaction, это правильнее? Для небольших проектов вместо fetch лучше использовать axios или нет? Отдельное спасибо за не использование фаербасе. Инструмент хороший, но вы в другом уроке к нему обращаетесь через библиотеку. Мне как новичку было не ясно как заменить его на fetch или axios для работы с моим api на фласке

[@user-xw3ek8sf9t]

Есть небольшая просьба) если будет время запиши видео о том как работает патерн MVVM

[@VladilenMinin]

Хорошо, учту

[@olehposhelugniy18]

Било би интерестно глянуть пример модификации постов также через АРІ

[@Kalinkin88]

Расскажи больше о средствах разработки, что ты используешь плагины, экстеншены))

[@SemenAlexndrovich]

Спасибище!

[@romandavydov3738]

Very useful, thx!

[@twogender6587]

Чувак, ты классно объясняешь. Респект таким

[@ovocado9965]

Коммент для тех кто смотрит в 2021+. Если на средине ролика у вас в браузере ошибка Uncaught TypeError: Cannot read property 'use' of undefined" 19:33 На момент когда ты/мы смотрим этот курс уже есть Vue версии 3+, а видео сделано на версии Vue 2. Нужно переустановить проект с помощью vue create . и указать версию Vue 2. Тогда будет работать, проверено.

[@vladplaz]

Эх, точки с запятой и двойные кавычки)

[@XushnudbekXudoynazarov]

Бдогадарю Сениор Владилен 5 раз посмотрелб на конец то понял что такое VUEX. Спосибо ждём ещё новинки😁👍

[@bekzodbekolimbekov5964]

thanks bro that was super useful

[@royce84]

Очень круто! Спасибо большое, а то у самого руки не доходили до такого количества букв на сайте)) А есть пример с реализацией аутентификации, авторизации + vuex?

[@VladilenMinin]

Плейлист на канале целый

[@alisherum]

Спасибо. По Redux будет такой урок?

[@deastortion]

А если обращаться к бэку, то как использовать store для добавления постов? 26:12

[@evgeniyponomarev2616]

Очень годное видео, все разложено по полочкам! Спасибо, большое!

[@dmdk8301]

Спасибо за видео. Vuex давно пользуюсь, но только после твоего видео наконец-то понял для чего map-ы. И что геттеры внутри геттеров можно вызывать.

[@dmdk8301]

Вот начал переписывать на map-ы и понял, что до конца не понимаю async await. Я никогда не использовал эти записи... и вроде все работает.

[@VladilenMinin]

@@dmdk8301 скоро будет видео про асинхронность в js

[@user-rb2lk3nj9r]

@@VladilenMinin пока ещё мало разбираюсь в асинхронности. А если просто использовать axios, не будет лучше?

[@VladilenMinin]

@@user-rb2lk3nj9r axios это уже асинхронность Важно понимать, как оно устроено

[@sergeyimedia9768]

Отличное руководство. Спасибо!

[@web_kub]

Спасибо

[@ihorkh354]

Что за тема такая красивая в WebStorm установлена? Вы в основном ней пользуетесь?

[@MrHardison]

Видео отличное, информативность на высшем уровне, продолжай в том же духе. П.С. почему бы не использовать конструкцию ...mapGetters({ getAllPosts: 'post/allPosts' }). П.П.С. сделаешь мануал по настройке Eslint и Prettier в VS Code Для Vue и React?

[@VladilenMinin]

Безусловно есть пара моментов в vuex, о которых не упомянул, как например в твоем примере Но задачу я себе ставил объяснить принцип Учту, вероятно сделаю

[@alekseym1058]

Спасибо за видео. Интересно, с переходом к новому синтаксису во Vue3 (или с плагином "composition-api" для Vue2), на сколько актуальным остаётся Vuex? Собираюсь перевести проект на новый синтаксис, пока примеряюсь и, как мне кажется, без Vuex(который мне сильно не нравится) можно обойтись: "import my-store1", "import my-store2", reactive, toRefs, ..., кажется успешно заменят все эти мутации и т.д. Хотелось бы услышать Ваше мнение на этот счёт.

[@LuchkinDS]

если для вас vuex избыточен, можно попробовать вариант такого простого store: import Vue from 'vue'; export const store = Vue.observable({ count: 0, }); export const mutations = { setCount(value) { store.count = value; } }

[@yanaholoborodko2538]

Большое спасибо, очень понятные объяснения!

[@user-qv4hn6qq4n]

Однозначно лайк, все по делу. Но вот один момент при поверхностном взгляде непонятен, а собственно зачем так сложно делать достаточно простые вещи? Какое преимущество мы получаем, используя vuex вместо data например? Я догадываюсь, конечно, но почему-то нигде об этом не говорят. Автор (и все кто видит коммент), разъясните на общем уровне, а что нам он дает такого, что не дает простая data

[@user-lx3ti4oc3m]

Спасибо, столкнулся с проблемой как на Vue изменять состояния сотен экземпляров компонента, наверное это то что нужно. Наверное vuex позволяет получать контекст каждого экземпляра по id или встроенному uid.

[@windcrack8404]

Как всегда, без воды и понятно. А вот с vue-router сложно его применять?

[@VladilenMinin]

На канале глянь ролик по vue

[@TeppopucT]

Очень классное видео, спасибо. Я делаю бэк и решил с vue познакомиться. Пример с постами типичный и понятный. И вот смотрю и думаю... В реале пришлось бы реализовать добавление поста не только ограничившись отображением доп компонента, но и отправить его на бэк перед этим. Но чтобы клиент не ждал статус кода 201, можно его сразу отобразить в списке постов... Но вдруг пост успеет отобразиться, а с бэка потом вернётся ошибка валидации / таймаут или еще что? Тогда надо будет делать откат. Тогда надо будет пробрасывать "пути отхода" и показать алерт. И как же это сделать с помощью Vuex? В голове начинают крутиться-вертеться-переплетаться различные решения... Сам начинаю путаться в них. И моё эго тормозит и громко мне так рефлекторно кричит "Ой! Пусть фронт разбирается! Его проблемы!" )))

[@adadurov1]

Одно из возможных решений: добавляем к объекту Post свойство "статус", например с 3 возможными значениями -- получен, добавлен, неУдалосьДобавить. Создаем пост со статусом "добавлен", меняем, когда промис заресолвится (или зареджектится). И смотрим на статус при отображении: верстаем разные шаблоны и выбираем нужный через v-if.

[@user-pro100rik]

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

[@oce10t12]

Ну понятно понятно. Давай уже что-то посложнее, нестандартные решения, крутые фичи, было б хорошо, при применении того или иного решения говорить почему именно так, даже возможно задеть паттерны. Так же, например, у меня есть пробел или даже дефис в знаниях организации компонентов. А за уроки конечно спасибо)

[@VladilenMinin]

Скоро, сам хочу посложнее. Но для начала необходимо осветить основы

[@romartynromashka]

Из компонента PostForm ты вызвал сразу мутацию, хотя вроде бы надо было задиспатчить действие, из которого уже мутируем. Не нарушение ли это цикла движения данных?

[@advokats086]

Как проинициализировать библиотеку vuex в 2021 году... ? Изменился синтаксис...

[@eduardkolesnik5819]

А если мне нужно взаимодействие с service, правильно ли в vuex store импортировать его напрямую? Либо же лучше будет через компонент вызвать action с нужным методом servica - а. Или как? Мне не совсем понятно в этом плане.

[@Deligium]

Владилен, подскажи, пожалуйста, как будет правильнее, если нет асинхронных событий в отдельном модуле стора, но есть асинхронные события в других модулях стора. В таком случае в модулях где нет асинхронных событий можно вызывать на прямую мутейшн или лучше все сразу делать через экшн?

[@VladilenMinin]

Для синхронных можно через мутации идти, если там просто изменение состояния

[@Deligium]

@@VladilenMinin спасибо

[@ins2124]

Просто отличный видос, спасибо!

[@LoveleTi]

Супер

[@user-uc4yd8sw4k]

Спасибо, годно!

[@34shadows]

Спасибо, кайфанул)

[@VladilenMinin]

На канале ещё много роликов, от которых можно кайфануть) Присоединяйся!)

[@helleruzb648]

Красава Владилен, пожалуйста подскажи как теперь можно удалить эти поста ? Сижу уже пол дня и немогу никак найти ответ.

[@CorleoneMikele]

Спасибо, для меня это самая непонятная тема во vue , даже redux для меня был понятней.

[@kostiabazrov-life]

MC , ничего сложного там нет

[@Fs-xj2gu]

Что такое redux

[@user-ue8bh7tj5k]

@@Fs-xj2gu узнал что такое redux?

[@nickstojanovic9663]

Владилен, а почему ты в разных видео используешь то VS Code, то Idea ?

[@VladilenMinin]

VSCode чтобы быть ближе к людям, так как он бесплатен. Удобней Webstorm

[@romanbush5164]

Спасибо за объяснение) , все же vue имеет крайне нелогичный дизайн, а этом смысле даже react более интуитивный

[@evgeniydoronin]

Приветствую, Владилен! Подскажи, пожалуйста, насколько хорошая идея писать проект аналогичный youdo только на js/vue/firebase или лучше backend оставлять на django, а frontend выводить уже с помощью vue?

[@VladilenMinin]

Для реально проекта я бы использовал другой бекенд. Firebase крутой, но я его использовал для упрощения

[@evgeniydoronin]

@@VladilenMinin если другой, то что можешь посоветовать? Спасибо.

[@user-gl7tj8xg8e]

тут еще про SSR не стоит забывать, если поисковик это дело у тебя не сможет норм проиндексировать, то будет не круто

[@VladilenMinin]

@@evgeniydoronin Любой бекенд, написанный самостоятельно будет гибче, чем ФБ

[@webmobiledev]

Приветствую, удалось создать аналог youdo? Просто реально самого такие мысли посещали

[@user-gl7tj8xg8e]

Отлично, спасибо. А где качнуть исходник можно? там ведь все примеры нужные есть.

[@VladilenMinin]

Чуть позже добавлю в описании

[@user-gl7tj8xg8e]

@@VladilenMinin Спасибочки, у тебя хорошо получается, уроки прекрасный сборник готовых рецептов

[@jekasylar3397]

Хорошое видео но есть вопросы 1) что за расшерение для VSCode что так подсказывает ? 2) почему у меня VSCode автоматичиски меняет ' на " как это исправить

[@user-py8qy5tu8e]

Блин, то что нужно Спасибо огромное

[@ZA-Pobedu-RF]

Привет! А как передать в другой компонент количество постов, не могу передать в header, при переключении между постами и юзерами количество в шапке меняется через мутацию, но когда страница юзеры или посты загружается первый раз, количество постов ноль. в чем может быть дело, гугл уже до дыр заюзал, нет инфы. Спасибо за помощь.

[@damo7212]

Спасибо, очень круто, но есть один вопрос. В чем минус подхода что бы сразу обращается к state минуя getters и mutations?

[@zond_amond]

mutations это единственный способ модификации стейта. Что же касается геттеров, то они кешируются, поэтому именно их и надо юзать.

[@damo7212]

Serg Guevara понял, спасибо👍

[@user-lg3ve6ir1v]

офигенный урок, но слишком быстро все говорите и показываете, не успеваю схватывать) спасибо!

[@AndreyChursin]

И всё же, можно вместо Vuex обращаться к инстансу корзины.. менять там данные остальные компоненты "заметят" это изменение. В чём я не прав? Например: создаём объект корзины, передаём его во все компоненты где нам нужно показывать данные по корзине (да через props), далее в самом дочернем меняем количество товара в объекте корзины - геттер корзины рассчитывает новые данные (количество товаров COUNT) - компоненты которые используют COUNT обновляются.

[@maxSamolet]

Vuex намного проще Redux!!!! Я себе чуть мозг не сломал, когда учил Redux. До сих пор не особо понимаю как он работает. Владилен, огромное спасибо за твои курсы. Они очень помогают. Хорошо когда есть такие люди как ты, которые могут доходчиво объяснять. Было бы здорово послушать и посмотреть про работу с Next.js для React. Спасибо!!!!

[@SageMindWhisper]

Redux надежный и, что самое, управляемый. Тут же вся логика под капотом

[@Ya-GalinaVyacheslavovna]

@@SageMindWhisper ванилла ЖС еще надежней и управляемей))

[@-dubok-]

@@SageMindWhisper а vuex так, по-твоему, не надёжный и не управляемый что ли?

[@dx8026]

Да что его учить? Есть документация))

[@vitya.obolonsky]

1 к 1

[@user-np3et3mw4s]

Не, ну это лайк

[@neodinok-it3ym]

Комент больше пяти слов в поддержку поддержки