Vuex Crash Course | State Management
ฝัง
- เผยแพร่เมื่อ 13 ต.ค. 2024
- In this video we will build an application using Vue.js with the Vuex state management library.
Check Out My Sponsor - Monday.com
go.thoughtleade...
Code:
github.com/bra...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Vue.js Crash Course:
• Vue JS Crash Course (2...
Website & Udemy Courses:
traversymedia.com
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia
It's not long time I discovered your channel and surprisingly all of the videos are REALLY valuable.
ALL OF THEM...
It's not long time I discovered your channel and surprisingly all of the videos are REALLY valuable.
ALL OF THEM...
You've got a special talent for keeping this simple and to the point. Even the pasting in of CSS is an excellent idea. Keep up the good work, you've got my money!
I don't know , dude. Should I stand up or sit down for taking off my hat and say "THANK YOU, bro. That was mind blowing tutorial." . Good luck , bro.
You can easily change the `$event` part in the filterTodos by this:
Add/Replace this in FilterTodos.vue file
1. __
2. __
_import { mapActions } from 'vuex';_
_export default {_
_name: "FilterTodos",_
_data() {_
_return {_
_limit:0_
_}_
_},_
_methods: {_
_...mapActions(['filterTodos']),_
_onChange() {_
_this.filterTodos(this.limit);_
_}_
_},_
_};_
__
Add/replace this in todos.js (module) file
1. In _actions_ add this instead
_async filterTodos({ commit }, limit) {_
_const response = await axios.get(`__jsonplaceholder.typicode.com/posts?_limit=${limit}`)__;_
_commit('filteredTodos', response.data);_
_}_
2. In _mutations_ add this instead
_filteredTodos: (state, todos) => state.todos = todos_
8:46 scaffold doesn't work anymore with the latest version of vetur, you should type 'vue' instead.
Thanks for sharing this information. That's why I can't use "scaffold" now, and I even don't know this is not the default snippet.
I got surprised this week with that too :(
Thank you very much! I was wondering where did it go.
Actually there are some templates provided by VS Code plugins, so when you enter vbase and hit tab it should expand into whole section, similarly vdata for data () { return { ket: value } and I suppose many more.
This doesn't work for me anymore. Alternatively you can you "html", "js" and "css" to pass through Ventur the part of the component you need.
Lets Go!! Brad don't stop ever!! Thank you sir.
Thanks, i'm a working developer and this tutorial is industry standard. Learnt a lot.
im a new convert to Vue. React was driving me nuts (jsx) and when i looked at Angular, Vue just looked better in every way. Thanks for these tutorials.
I 100% agree
At 47:15 you can just use something like "const limit = document.getElementById('id_name_of_select_element').value;" to get the value of the element. Don't forget to give your element the id you passed into this const variable
Or just e.target.value works fine
for vue3
index.js:
import Vuex from 'vuex';
import todos from './modules/todos';
// Create store
export default new Vuex.Store({
modules: {
todos,
},
});
main.js:
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
const app = createApp(App);
app.use(store);
app.mount('#app');
Thankyou Bro!!!!!!!!!!!!!!!!
thank you! this worked when 18:59 wasn't working
and the error I was getting was
error 'axios' is defined but never used no-unused-vars
uff I was going crazy on this thanks :D
I recommended your channel to my friends who are interested in web development..
Thank you :)
@@TraversyMedia your welcome Brad. I hope you will continue to upload these great content videos in future.
& I recommend it to anyone who is not even interested in web Technology .....
Brad is a mind reader... Just opened vuex docs yesterday and still on it, then he uploads this video :D. Thanks Brad
Life should be simple or minimal. I'm moving now to Vue from React.
awesome !!!
yeah IMO React is trash
Same here 🤣🤣
I have no idea why people still use React, when Vue, Svelte and other awesome framworks exist, idk
@@asanokatana Even junior can rebuild React app to Vue, but Vue to React don't.
i just got done watching your vue.js crash course you updated back in January. You said you were gonna do this video "in a couple months." This posted in March. Love how spot-on you were with actually delivering on that promise. Good work sir!
If you want to use mapGetters like he does in 17:26 you now have to add the spread operator pointpointpoint infront of it -> *...mapGetters(['allTodos'])*
Sir I love your Videos, but Have it in mind that the next generations won't forget a Hero like you..
Your Crash Course is great, I have watched it since I'm in first year college and now I'm in an industry. Great help! Thank you.
wow thats a very nice of u jason. good to know
Man this is gold, keep recording new lessons. Explanation, visual are on point, and most importantly it is brief.
Subscribed and added to watch list on the second video.
47:30 , you could just type $event.target.value in the @change method in FilterTodos.vue
also use event target value in todos.js?
@@kyrierevival3658 I boiled it down to const limit = parseInt(e.target.value); but I notice there are more concise options
None of it is working, I am getting event.target is undefined in the todos.js (module) on console.log
Thanks Brad. I'm learning Vue and this is really helpful. Also what I like is you don't speak / code too fast so that I can code while you speak.
Thanks, Brad!
That really helped me understand faster how to use Vuex. It's simple and elegant. So easy once you get the hang of it. Keep up to awesome work!
really good tutorial, I was just brushing my vuex skills,
Quick note: - instead of using event for filter you can use local data(state) and on change on select makes it easier
your tutorials help me a lot for my first job as a software engineer. I'm grateful to Traversy media
Subscribed to this channel like 8 months ago. Dont regret it at all.
For those who encountered TypeError: Cannot read properties of undefined (reading 'use') -- Remove the line Vue.use(Vuex) in index.js will do. It took me hours to figure it out :")
Great timing , just learning vuex myself :) so this should be very helpful, will we be seeing a nuxt crash course soon? Hope so!
Can always count on you to have a tutorial for things I need to quickly learn.
I hope you don't mind I listen to your videos on 1.75x speed! You still sound awesome! I just lack time these days... It's not you... it's me.
Thank you for providing so much value to the community!!! 👍👍👍👍👍👍👍👍👍👍👍👍👍👍
You're very welcome :)
This was a good course Brad, but I think you made a mistake to show only using ...mapActions and ... mapGetters when writing Vuex code, as it is easier (and cleaner in many cases) to use this.$store.dispatch() and this.$store.commit() in components versus overly complicating things trying to be elegant using the ...map feature of Vuex when you can just use the global. Thanks for the good work!
no one else is uploading consistently like brad on youtube. the absolute GOAT
Thank you for being soooo generous. I have 2 days of programming experience haha and your channel is really inspiring me to work learn work learn work learn.
You must be a godly programmer at 2021.
Brad, I am not only learning new things from you but also the coding structure you do is very clear and easy to understand.
Thank you so much! After watching the Vue Crash Course and this one, I immediately became a patron. Love your content!
Clear and concise walkthrough. You got me a job Brad. Thanks.
Much appreciated. Thank you for the quality and no annoying selfies. Best of luck.
Our team is switching to Vue and this tutorial has been super helpful for me. Thank you so much!
It is one of the shortest and best videos to learn using Vuex in your projects, Thanks Brad and thanks Traversy Media
Wow man, your stuff has always been great but this video in particular is really a whole new level. I learned way more from this than I thought I was going to. Thank you man, hope you're healthy and vibing in quarantine
you're the only one who describes things clear. thank you
Literally stumbled upon this problem in my project, glad to find vuex
You are the best teacher I've come across... Thanks for keeping it real. Respect
Thank you Brad. We are so so lucky to have you and i wish you success in all your projects because you deserve it.
this channel is guaranteed to be a subscription. Keep going and I wish you a lot of success.
Hi Brad,
@48:00 why didn't you just use e.target.value ?
No one's perfect
I thought the same thing lol
why he didn't use v-model?
This is the best video ever for learning VUEX in such a short time. Thanks a lot! Keep going!
Brad this tutorial was so clear and informative! Keep up the excellent work!
I'm just starting with vuex , this tutorial comes very handy !!! , i like the way that you explain man.
Thanks Brad! I got interested in web development thanks to you, I currently have 2 years working mostly on React, don't love Vue (don't dislike it either) but is good to know other ways to do the same thing.
These crash courses are absolute miracles!!! Enough to get you started without leaving a confusion :D
Thanks Brad, was pulling hair after moving project to SPA with vue-router, this is the way to go!! :)
Thanks, this helped clarify a few things for me. State management can be confusingly awesome.
Thank you so much, you really made my life essay as I needed it in my thesis. Most important the comparsion with Redux was very useful as I knew it already.
Thanks for sharing such high quality material for free. Excellent course about Vue and Vuex - I am starting a new role on Monday and those courses helped a lot.
Edison didn’t sleep 8 hours per day because, he didn’t ask internet for an advice. Hard work has no substitute. Thanks Brad.
Brad love you man. The way you describe those stuffs it looks like wow how easy was that.
Nice tutorial! I am using vue/cli 4.5.13 and there are some incompatibility issues. For new version of vue/cli, it's better to select vuex directly from the vue project creation wizard, which will setup the vuex environment correctly for you.
thanks , u helped me out
Great to see sucha massive tutorial dedicated solely to vuex. Well done
Thank you so much for this video and in general what you do! For a while, I have been quite confused about state management. But my confidence has increased after watching this video. Time to implement and build a foundation from this video for my own site. Again, thank you!
In between the grid spaces of todos it is actually an optical illusion. You see grey dots between the spaces of the todos you are not looking at 35:36
Thank you so much Brad, your content is one of the most educational content on TH-cam, thank you.
You could've also filtered the todos by emitting an event from the child component and passing range from there to the parent component. I did it this way and it doesn't even require you to make a new request to the server.
nuxt js next please!
you are doing an awesome work!, I have recommended your channel to lot of friends to learn and move forward in career.
Some suggestions...
1. You can use e.target.value when filtering
2. When updating, you can use a patch request and just pass in completed in the request body, and call the update todo action directly in the double click listener
Great video as always!
Just really need to thank you cos you make things seem super easy, Kudos
Awesome content, Brad. Thanks a lot.
These crash courses you make are just gold. Its so awesome to get up to speed on few things here and there so quickly.
great course! quick, detailled & helpful, even if you never worked with state management
This was a great video tutorial; It helps me clarify some concepts about Vuex. Obviously, this is not for a beginner. Great job! Thank you for sharing your knowledge; I wish you success in everything you do. Thank you
Hoooly... i just watched vue crash course and i thought it would be cool if you could do vuex course. You are a beast, Brad!
I think this is a really good intro to Vuex. Do you have an example that uses multiple modules, or an authentication flow with Vuex?
Excellent video again, I so much like following your videos, explained in very detail and thorough, I like the fact that you make a mistake and then fix it in front of us, everything is so natural :-)
jsut complete right now,step by step......thank you man
Great Class man!! congratulations, but only one question... why don't you use mapState in order to get the State from the store, is there any performance reason that I didn't take into account??
8:46 "scafold(tab)" changed to "vue(tab)"
Damn dude, what a lifesaver! You are the best.
Excellent tutorial! I noticed that removing some await(s) fixed the timing issue
Sir, you seriously rock! Very well explained in a relaxed and clear way.
great intro to Vuex, thank you very much. I'm new to vue and vuex, but I have a question after I saw you create an action for filter, does it have to fetch another API request to filter the todos? won't it be possible to just filter from the todos state w/o having to call another API request?
Hi Brad;
I'd like to make a suggestions:
Since Udemy doesn't have a feature for student to follow an instructor (Like pluralsight has), where when an instructor publishes a new course all the followers get email of the new course. Unless I've missed it, I can't find it on Udemy.
My suggestion is, when you have a NEW course on Udemy, create an intro video here (2 minutes) to describe the course and you get TH-cam to notify 675,000 subscribers for you. This way if I see the course that fits me, I go an buy it. In the intro you can offer discount if you want.
In fact you should tell Udemy to offer feature that students can follow instructor.
..Ben
Are you going to do a Vue.js Udemy course? If you do sign me up.
This tutorial helped me a lot!
Valuable tips.
Thanks for sharing your knowledge and time.
Success in your projects.
Thank you very much Brad for your passion and knowledge sharing. Greetings from Brazil Vuejs Community!
I recommended your channel to my friends who are interested in web development,
I'm so thank you for good video share 💖💖💖
Thanks. It has really helped me. I really like your videos.
Just like aways, I've learned a lot here! Thank you, dude!
Hi from Peru, thanks for sharing this awesome course about VUEJS
Your content is amazing, Simple and very effective. Keep it up.
Hello Brad. I really enjoyed your videos. May I ask if you ll do a Nuxt Crash Course?
So clear and concise, as always ! Thanks a lot Brad !
this crash course is very nice, i so understand everything about vuex. thank you very much sir.
Thanks for using REST API. Other tutorials are like using manual hardcoded datas which are not actually the best idea for this kind of tutorial.
Another fantastic tutorial! Thanks brad!
I've seen recently some debate on Reddit regarding where to put the JWT whether it should be in state, localstorage or a cookie. Where do you come down on this Brad? I ask because @ 3:50 on your Vuex Terms slide the State term includes 'token' as one of your examples. I'd love to hear your thoughts on how to handle Auth within the Vuejs/Vuex app
Thanks for the video, it was helpful! However I noticed that you did not use async/await when calling the store actions which you should.
A nice tutorial. Simple, concise and well explained.
If your having trouble with the $event part when filtering todos because your not using commit and can't compile the app you can by pass it by just placing commit(); at the end. you'll get a console error because its an empty commit, but at least you'll be able to compile and see the event in the logs. if you take out the commit part to try to compile and just pass in e, it will end up using e as the 'commit' and you wont see the event
Just tell eslint to ignor the line for a while.
// eslint-disable-next-line
async fetchTodos({ commit })
Later you should remove the ignore line code.
Amazing. Thanks to you I understood all the topics about Vuex.
This has been life changing to me .. thanks man.. God bless
fantastic tutorial. perfect speed and everything is super clear.
Big help bro..best content...