ACTIONS | VueJS 2 & Vuex | Learning the Basics
HTML-код
- Опубликовано: 15 сен 2024
- VueJS is an amazing Frontend Framework! This video dives into Vuex, a very useful extension, helping you with State Management.
It's a JavaScript Frontend Framework - for more Resources on JavaScript, scroll down.
Want to dive much deeper into it? Have a look at this complete course: acad.link/vuejs
Get my full JavaScript course: acad.link/js
Full Playlist: academind.com/...
Want the Source Code? Go to the following Github Repository and chose the Right Branch: github.com/msc...
Also consider having a look at the Official Docs: vuejs.org/
And the official Vuex docs: vuex.vuejs.org...
You can follow me on Twitter (@maxedapps), Facebook ( / academindchannel ) or visit our Website (www.academind.com).
It's worth to mention that there are also `mapActions` and `mapMutations` helper from vuex
Don't think I've ever seen somebody explains fairly complicated code examples as clearly as this, great job and exactly what I was looking for to clarify everything read in the Vuex documentation. I may also look at the Udemy courses (JS, ES6 and VueJS) based on this. Thank you!
Thanks for your amazing feedback! Would be really great to welcome you on board of the courses, too :)
Just checking Vue after using Angular and React and big thanks for the great tutorial! I've noticed one, kinda big, problem with the code example. Assume, that action takes a long time to process. Here you can simulate it by setting 'register' action timeout to 5000 for example. Then click on a Register button as many times as you can and in a result you'll have the same user registered multiple times. I hope everyone understands what will happen if actual action will write to db for example. At least I've fixed that by setting more 'strict' approach of user search by adding { return ... && user.registered == false} and then if(user) { ... do stuff ...} Please share if there is some other, more Vue'sh way, to solve the problem.
You can handle that by adding a disabled attribute to the button, you can also set a validation logic inside your commit like if the data exists, don't add it, again if the data is empty don't try to remove it etc.
very valuable until this year . thank you sir .
Thank you very much for your work! All clear and accessible! You helped me a lot!
Great to hear that, thanks so much!
Your teaching skills are phenomenal
Thanks so much David, absolutely amazing to hear that!
Recommendation: link all your videos of this series in the description. Its 2019, I _had_ to go to your channel, scroll down 2? years and not sure how many videos, to find the series eventually. Then I watched the video, want to watch the next. Guess what, as I didn't open the video in a new tab, I can go _back_ to your channel, and do it all over again. I am sure, many people didnt watch the follow up videos, because they were too lazy to do it.
And yes, your videos are great.
Thanks a lot for the hint Jossnaz, we'll add a link to the playlist in the video description.
Amazing videos. I'm starting with vuex and your videos are helping me a lot. But you should have put a number in the name of the video. I never know if I'm watching the correct video of the sequence.
I actually created a playlist, you can simply step through that :) Happy to hear you're liking the videos!
Great video ! I am looking forward to announcement of the rewards
Coming from a state management pattern like Redux, this is all pretty familiar... except you don't need to subscribe to the store, because Vue's data binding is all reactive and magical, right?
Right - though you can subscribe to a store (there is a subscribe()) method but you rarely should need to do this
There's some confusion between mutations and actions. Some say the differences are:
- actions can contain asynchronous code, while mutations cannot
- actions should contain business logic, mutations should not
Is this explicitly true or are these best practices?
First of all, thank you for your videos I´ve learned a lot watching them. And there´s a question: If you click on the same name multiple times very quickly, it triggers the actions multiple times, is there a 'correct way' to handle just the first dispatch?
You would need to manually store the info that the item has been clicked, then check this in the click handler and simply "return" (do nothing) in such cases.
@@academind
This seemed to work for me.
1) Add an "enabled" property to each user (set to true).
2) In the register action, set enabled to false
3) In the HTML for the button, use :disabled="!user.enabled" to disable the button
4) Set enabled back to true when unregistering the user
Does that sound reasonable?
Thanks for great tutorials!!
What if I clicked more than one time the register button in async method? for example in settimeout within 2 seconds, it creates unwanted additional payload. How can we prevent this? Thanks...
thanks I was struggling to understand the difference between actions and manipulators
Happy to hear that I could help with that! :)
Howzit bro... you mentioned that one can run the async code in the method then commit but it would give logical errors... can't you solve this by using the promise nature of the http request provided by vue-resource? Woudn't this synchronize the code by making the commit wait for the http request; by putting the commit in the then callback function?
Thank you Academind!
Thank YOU for your support Ronnel!
Great series! Thanks!
Thank you Fernando!
This is awesome! I love VueJS
Thank you Christopher, I also really like Vue :)
Awesome videos. A question though. Where is the appropriate place in the whole cycle to send requests to the server?
Thanks so much! That would be in the Action.
But since you can declare actions anywhere where is the right place? The store, the app, in the particular component that asks for data? I guess it is the store, but Im not sure.
Hi, Max! Happpy New Year!
Same to you Andrei! :)
You are amazing thank you
YOU are amazing Andreu, thank you for your support!
Hello Max,Node JS has a async data transfer but its considered hard to deploy compared to regular servers like php. Does it still make sense to learn as a first programming language
Hi Sandy, Vue.js is for frontend development, not for server-side development (which PHP would be for). Therefore you can't compare the two. Also, Vue.js deployment is super simple: Upload the index.html file + your scripts and have your server serve that index.html file :)
Thank you for this videos. I'm amazed how cristal are your explanations. Keep up this way. Best wishes in 2017. :)
Thanks so much for your awesome feedback! :)
The BEST as always!
Thank you very much !! :)
Thank YOU Ricardo :)
GoodJob!
how to use vue-router inside of vuex?
ps: this.$router.push("/path") is not working
Why would you use router in vuex.
yeah i know that was stupid question.. 😅
luv u dude.
@Academind "series" is pronounced "seer•eeze".
The way you say it sounds like you're saying "serious".
Thanks for the hint, I'll try to keep that in mind for the future.
@@academind It's me again. I'm not sure if you get notified when I use @Academind, but I really want your opinion. If you can find my comment in your video titled 'Vanilla CSS vs Bootstrap vs Tailwind CSS' , it's worth a read.
If not, the gist is, I wrote an article titled 'The “Backendification” of Frontend Development' where I discuss some of the long-term maintainability challenges quietly being introduced by CSS and SPA frameworks.
I would love your opinion: medium.com/@mktlr/the-backendification-of-frontend-development-62f218a773d4
You very cool
Do you like Vuejs? I think it gets bloated really fast
I like it, yes. I also don't feel like it gets bloated that fast and I did create bigger applications with it, too. Certainly, Angular 2 allows you to write less code but therefore it comes at a bigger overhead/ overall bundle size.
Alright Thanks
if payload doesnt from loop??
Vuex gives me a headache!
Hello Max, it is the shame that your excellent videos do not have the ACTUAL SUBTITLES. Your English is very very far from the king one ;(
Sorry to hear that but there's no way for me to provide better subtitles. I hope you're still able to learn some interesting things
What? Comrade, it looks like you do not know English at all! Only this is your problem! I'm from Belarus, and I do not know English very well, but these lessons are very clear, and English is very clear and understandable!