Все о 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

[@serg8483]

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

[@vadvoker]

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

[@mrrobot7387]

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

[@fhghfhfghfghf6814]

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

[@user-vg9mj6eo7e]

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

[@unknownWakeborder]

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

[@VladilenMinin]

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

[@CorleoneMikele]

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

[@VladilenMinin]

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

[@VladilenMinin]

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

[@user-rb2lk3nj9r]

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

[@germanshvetsov3076]

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

[@romko-romario]

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

[@web8845]

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

[@masturch99f]

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

[@nicksimmons4722]

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

[@antonb6831]

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

[@Ya-GalinaVyacheslavovna]

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

[@antonbilichenko1312]

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

[@Ya-GalinaVyacheslavovna]

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

[@andriihelever1793]

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

[@user-zg4ef9in6s]

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

[@user-io2eg8nh4v]

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

[@user-ti9jw3im1p]

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

[@sergey4879]

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

[@x-bit5193]

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

[@sayidabbosurayimov6044]

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

[@elchinkocharli8832]

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

[@soulwind7577]

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

[@IvanYarmots]

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

[@user-zb7ij3gg5s]

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

[@taran_dm]

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

[@viT-1]

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

[@nickpolishchuk5635]

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

[@shtas89]

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

[@mariagileto2223]

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

[@user-xw3ek8sf9t]

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

[@Vlad-em1bx]

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

[@RuportOnTable]

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

[@kirillgavrilov9681]

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

[@dostonasadov6444]

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

[@trustambassador]

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

[@quem6917]

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

[@step55555]

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

[@abdulovdb]

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

[@user-gy3rm9hf7m]

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

[@VladilenMinin]

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

[@user-gy3rm9hf7m]

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

[@AlexandrSpirit]

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

[@dx8026]

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

[@sergeybakai7133]

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

[@JuiKoloshi]

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

[@k0n4enbli]

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

[@angelinadorasheva5828]

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

[@alinashtanko7159]

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

[@antonkleshnev5342]

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

[@kumpliko]

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

[@vinewu7557]

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

[@Vlad-em1bx]

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

[@VladilenMinin]

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

[@Vlad-em1bx]

:)

[@bekzodbekolimbekov5964]

thanks bro that was super useful

[@deastortion]

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

[@user-xw3ek8sf9t]

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

[@VladilenMinin]

Хорошо, учту

[@olehposhelugniy18]

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

[@smokvin]

Спасибо!

[@romandavydov3738]

Very useful, thx!

[@royce84]

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

[@VladilenMinin]

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

[@Kalinkin88]

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

[@vladplaz]

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

[@alisherum]

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

[@SemenAlexndrovich]

Спасибище!

[@ihorkh354]

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

[@eduardkolesnik5819]

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

[@ZA-Pobedu-RF]

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

[@XushnudbekXudoynazarov]

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

[@sergeyimedia9768]

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

[@twogender6587]

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

[@dmdk8301]

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

[@dmdk8301]

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

[@VladilenMinin]

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

[@user-rb2lk3nj9r]

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

[@VladilenMinin]

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

[@romartynromashka]

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

[@ovocado9965]

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

[@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; } }

[@helleruzb648]

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

[@user-uc4yd8sw4k]

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

[@MrHardison]

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

[@VladilenMinin]

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

[@jekasylar3397]

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

[@Exanrus]

Здравствуйте, надеюсь читаете комменты. Судьба сложилась так, что нужно разрабатывать магазин на vue - в обще я подключил vuex и пробую его, но не выходит одна вещь Например у меня несколько модулей - глобальный app и подчиненный ему categories в app есть стейт isLoading и в модулях указан categories как мне из categories управлять состоянием isLoading? так же не могу понять, как использовать getters из app в categories. В контексте они есть но почему то они как undefined

[@Deligium]

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

[@VladilenMinin]

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

[@Deligium]

@@VladilenMinin спасибо

[@windcrack8404]

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

[@VladilenMinin]

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

[@xcxc-iu3rb]

Мне показалось на чистом Vue код проще. С Vuex проще работать именно в больших проектах, правильно понимаю?

[@oce10t12]

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

[@VladilenMinin]

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

[@user-lx3ti4oc3m]

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

[@ins2124]

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

[@user-qv4hn6qq4n]

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

[@yanaholoborodko2538]

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

[@nickstojanovic9663]

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

[@VladilenMinin]

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

[@user-gl7tj8xg8e]

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

[@VladilenMinin]

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

[@user-gl7tj8xg8e]

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

[@user-lq4ms6bk8n]

Спасибо

[@damo7212]

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

[@zond_amond]

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

[@damo7212]

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

[@user-lg3ve6ir1v]

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

[@olegmaz3969]

Владилен, здравствуй. Подскажи пожалуйста если в actions использовать не fetch, а this.$http.get или this.$http.post из vue-resource, то есть ошибки. Нужно подключать Vue в модуль и оброщаться как Vue.http ?

[@VladilenMinin]

Нет, просто там контекст не определён

[@advokats086]

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

[@webmobiledev]

Доброго дня, подскажите а почему если массив данных передавать из родителя в дочерний компонент ( вот так ) то при перезагрузке страницы данные не отображаются, при переходе по роутеру все норм. То есть, у меня две страницы: главная и статьи, если обновить страницу статьи то посты не отображаются, если после перезагрузки перейти на главную, а потом обратно на статьи то посты отображаются.

[@evgeniyponomarev2616]

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

[@AlexandrSpirit]

Всё хорошо, но при обновлении страницы, state пустой становится :(. А тот же токен у меня на 24 часа выдаётся. Приходится опять аторизацию проходить ( Как используя Vuex хранить определённую информацию на стороне клиента? Что использовать: куки, LocalStore или IndexedDB?

[@LoveleTi]

Супер

[@evgeniydoronin]

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

[@VladilenMinin]

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

[@evgeniydoronin]

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

[@user-gl7tj8xg8e]

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

[@VladilenMinin]

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

[@webmobiledev]

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

[@34shadows]

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

[@VladilenMinin]

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

[@user-pro100rik]

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

[@TeppopucT]

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

[@adadurov1]

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

[@livingston9750]

Нифига не понял, но очень интересно )))

[@rinatkhusainov5894]

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

[@diegomaradona336]

не очень понятно зачем весь стейт целиком в функции пробрасывать, можно же state.posts сразу пробросить?