Learn Vuex by Example - Handling Vue State Management
HTML-код
- Опубликовано: 29 сен 2024
- Written tutorial: goo.gl/dNv4aU
Enjoy? SUBSCRIBE! and check out coursetro.com for more.
In this tutorial, we're going to learn all about Vue state management (Vuex). We'll do so by creating a simple app that will help demonstrate how to use Vuex.
Let's rock!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS weekly!
My site: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!
You shoudn't import REMOVE_ALL mutation to component in the end
Thank you so much!
awsome awsome.....!
When an awkward joke ment to be funny but remained awkward :D
Hi, great tutorial! Have a small question though.
What's the reason you define both ...mapActions(['removeLink']) as a removeLink function that calls this mapped action in the HelloWorld component? I just omitted this last "removeLink" function and that works perfectly fine too? Perhaps that's only necessary if you would like to do execute some extra modifications to the view?
Also in the last step ("Stats" component), you both do ...mapMutations as ...mapActions. Doesn't only doing ...mapActions suffice?
Happy to see someone has the same question as mine.. :-) Hope Gary reply for that soon..
@@easy-stuffs still no reply
Since you have directly triggered ADD_LINK to add a new link without using any mapActions then why can't you do the same to REMOVE_LINK and REMOVE ALL? Any reasons?
he actually mentioned it, if you want to do [ a sync call ]then use MapAction. listen from 25:05
Great primer to vuex that's easy to follow. Thanks for putting this together. Cheers!
31:36 Why do you import mapMutations at this point? Isn't mapActions sufficient?
legit thinking the exact same thing. the component should only need to be aware about creating actions and sending payloads afaik
No need to import mapMutations.
Why did you need to map the mutation for REMOVE_ALL? All you did was dispatch the action. You never referenced the mutation in the component.
I agree. Mutation and State should not be in component. Only mapGetters and mapActions should be in component.
you are really good at talking , great voice, easy to keep up tempo.. im enjoying this and other nuxt vuex courses... you are not the only one, but sure one to keep up coming back to..
Why do we have to map Actions from the store - if we actually are not going to bind HTML events to those store actions ? maybe there is a way to just call those actions directly, without mapping it to components methods ?
this is the post [coursetro.com/posts/code/144/A-Vuex-Tutorial-by-Example---Learn-Vue-State-Management]
You sir just earned a new subscriber! I have learned a lot from just this tutorial. Thank you for your hard work. I hope you keep making videos like this in the future.
truly a big fan of these Vue videos. thanks!
why my color is gray, not pink like yours?
it's better than angular?
where do you define the ?
routerView becomes available automatically when you choose to use routes. router.vuejs.org/api/#router-view
I didn't get why not just use this.$store.dispatch("removeAll") in methods? No need to do any imports or additional declarations.
Now look if somebody ran into an error Maximum Call Stack exceeded on removeLinks()
I found a solution. So under Methods, in mapActions its referenced as 'removeLink' but when defining it its removeLinks (plural) .
...mapActions([
'removeLink'
]),
addLink: function() {
this.ADD_LINK(this.newLink)
this.newLink = '' // empty when
},
//plural
removeLinks: function(link) {
this.removeLink(link)
}
}, /
Great tutorial, thanks. I made this project with Nuxt and everything worked well. The only problem I got is that when executing the removeAllLinks method the links array is set to 0 after 1.5s but the is not updated, the links are still displayed and the App needs to be refreshed. Any idea what is happening?
I have started the development a screen printing shop management system. How would one go about making sure they have the proper implementation plan.
Hi Gary, really nice tutorial! Congrats! I also tried to add a link by creating an Action and it worked just fine. So what's the difference between calling the mutation (this.ADD_LINK(this.newLink)) and the action such as ( this.addLink(link) )?
Thanks for this. Vuex is simple to use than redux with React.js.
just wondering if name: 'Stats' is necessary as you are using export default which will take the filename.
Nice video, what is the difference between mutators and actions ?? We can remove an element in mutators right??
Great tutorial. But no, RUclips, I do not want to learn to draw, even if I see the commercial 27,000 times.
Getting Error in v-on handler: "TypeError: this.ADD_LINK is not a function" with Typescript :(
What is a good practice to attach data from a database to vuex? At what point should it be fetched and passed to vuex? Should it also be done through mutations?
very good tutorial i have already use vuex but this good example for map action map state and mutation we can use a standard way of coding.
why is mapGetters defined in computed and mapAction defined in methods?
i am a beginner should i start with vuex or made some project with vue at first
Awesome, this tutorial make Vuex looks very easy, thank you
Awesome stuffs. Thanks. Also can you also make a video related to SEO in Angular 5 and above and how to host the site made in heroku or other. Thanks
For future courses can we have some typescript examples?
how to use state in component itself(Not in HTML)?
Really nice example. Very simple and informative
Unreal tutorial. Thank you very much.
whats mean "..." after mapState function?
You are too good. Great video on Vuex. Learned a lot. thanks
Thank a lot for this tutorial, it really helps me to more understand vuex concept ! Thank again.
Awesome
Really nice tutorial. Thanks a lot!
But I'll need you to go ahead and stop saying "I'll go ahead". That'll be great, m'kayyy.
Geez, the nerve of some people!
Thank you very much for this kind of beautiful explanation
Excellent Saved my day! Thanks
0:36 libertarian confirmed
after hearing that, I needed to watch some Tom Sowell :-)
Who doesn't hate tho?
ruclips.net/video/qLcc19mt4eA/видео.html needed
Taxation is theft
Great video! Thanks :)
Awesome thanks for good tutorial..
4:03 not sure how to hineniner
Thanks for the amazing tutorial!!
The best of the best! Thanks a million!
awesome video
Thanks a lot for the tutorial!!
Thanks i learned alot!
great tutorial !!!
is this a little outdated? its August 3 2019.
No, it's not. Feel free to follow the steps from this video.
Good tutorial 👍👍 .
i reinstalled vue-cli but it still show 2.9.3
i found out npm install -g @vue/cli
Please add the source code to github, Thanks
Nice
Thank you!
19:52
Why is this better than PHP and regular Javascript?
You're the man! Thanks
I still don't understand why people code on windows... We're in 2018...
I still don't understand why people bitch and moan about which OS others use... Like, we're soooooo in 2018!!!!
We are forced to use Linux at university, and when we want to lean, people code on windows. It's been already 4 years that i hear my tearchers be like "Noo, don't code on windows, yes linux and mac is better, yes to open source, oh you have windows, where here -10 on your test 'cause that's bad".
And I'm not your friend, so don't tell me that i bitch or moan. If you can't give a proper answer, well don't.
I'm here to lean, not for you to scream at me.
Thanks.
I was recently quoted as saying, "Don't go to school for code." You've given me reason #427 to add to the list of reasons: Stupid professors 😂
And if you were really here to learn, you would have omitted the snarky "We're in 2018.."
I'll give you an answer though. Back in the late 90s when you were in diapers, I liked to game and code, thus PC.
Back in the early 2000's, I had an aversion towards computers that looked like toys (iMac).
Back 8 years ago I still liked to game and code, but I also had an aversion towards weird looking soyboys in silly commercials (Justin Long).
Throughout all of this, I could always easily upgrade, build equivalent PC's for half the cost, and design / code whatever I wanted.
...are we BFF's yet?
Maybe I'll elaborate on today's live show! Tune in at 10:30am et and I'll give you a shout out!
Actually, everything i've learn isn't because of school or university.
Sorry for "We're in 2018", that's a misunderstanding.
Of course we're still BFF, i learned lot of thing thanks to you.