IMHO you're using Getters wrong, I see this a lot. As the docs say 'Sometimes we may need to compute derived state based on store state', you don't need them to just return a store property, they are more like Vuex `computed` properties based on state. You can already access `this.$store.state.currentJoke` in your Component (or using the corresponding `MapState` helper) without needing a getter at all. The problem with the way you are using them is people end up thinking they need to create a getter for every store property, and you end up with loads of unnecessary getters just to access store props that are already exposed on the state.
I hate the extra layer of indirection with the Vuex map* helpers. I always like code to be obvious and simple. I honestly don't know why someone would mind using the full store accessing syntax when it is pure and simple and readable and you don't have to hunt down an extra layer of indirection to find out where that function your calling is coming from.
@@hellocheng7071 Found it: marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode You then still need to enable Neon Dreams (Descriped in the theme readme)
Don't know if it's an inside joke or whatever, but it's spelled like this: "(a)synchronous" www.merriam-webster.com/dictionary/synchronous www.dictionary.com/browse/synchronous?s=t dictionary.cambridge.org/dictionary/english/synchronous
Very quick and not really informative video...instead of explaining what's what you just sprint through the stuff without letting people understand them properly. By just copying your code I won't learn anything bruh
What would be the difference on storing state at the root vue level and read/ update from all children vue components? To me, vuex is too verbose just to read write “global” state vars
To answer everyone's question, the name of the theme is SynthWave '84. It was in his top themes video (ruclips.net/video/IX6ADPY52Io/видео.html). To enable the glow, you have to press Ctrl+Shift+P and enter 'Enable Neon Dreams'
For the actions functions, they take in the store as the first argument, not state. I think you made a mistake on that side Erik. Great tutorial overall though :)
8:30, if you run into to that problem, stop, think about your poor life choices, take a nap, eat well, paint some UML diagrams, and refactor your way out of the messy race condition you've made. One of the few people I feel like slowing down. Gj.
I just learned that we shouldn't use index as v-for key attribute. There is a great article on this topic by Michael Thiessen: michaelnthiessen.com/understanding-the-key-attribute/ Hope this helps!
So I use Angular. Started learning Vue recently. so Vue does not use singleton services? We have to use state management like redux ie: Vuex? Is this the best practice for Vue?
bro, thank you so much, I just finished the video and had an unstoppable impulse to press the subscribe button ..... I almost broke my finger lol , you are a great teacher.
Is it bad to put all my async code in actions that can be shared throughout my app. I find myself using this pattern a lot, rather then mixins, rather than putting asycn code in the component methods, i put it in async actions. btw i like the pro tip with mapgetters object.
Your videos are a big save. The only problem for me is that you don't explain much when you are doing your magic, therefore this is the main reason I wouldn't purchase your Vue.js 3 course. That's a boomer for me because I really like your topics, but you must dedicate more time to explain the things you are doing.
@@ProgramWithErik Thanks for your reply Erik! Can I ask what do you mean it's cleaner? In what way? Yup, I understand the part about using getters if you need to transform the results, but if it's just a direct use of the state, what's the benefit of using getters?
Damnn, that was one hell of a clean explanation. I am new to vue but I have experience with react-redux and man you made my life so much simpler, thanks a lot!!
![React Tutorial For Beginners [ReactJS] | ReactJS Course | ReactJS For Beginners | Intellipaat](/img/1.gif)
🚨 Sign up to Linode using the code below and get a $20 credit!
linode.com/programwitherik
pro trick : watch movies at InstaFlixxer. Been using it for watching loads of movies during the lockdown.
@Jairo Jake yea, have been watching on InstaFlixxer for years myself :D
@Jairo Jake Definitely, I've been using InstaFlixxer for months myself =)
@Jairo Jake Definitely, been watching on InstaFlixxer for since december myself :)
Hey, can you help me how to mounted mutation, I want to extract something and update state on page load , how would i do that.
Erik, what VS Code theme are you using? I love it.
It's syntwave ´84. Erik is featuring it here: ruclips.net/video/T_sL7SO4wMg/видео.html
IMHO you're using Getters wrong, I see this a lot. As the docs say 'Sometimes we may need to compute derived state based on store state', you don't need them to just return a store property, they are more like Vuex `computed` properties based on state. You can already access `this.$store.state.currentJoke` in your Component (or using the corresponding `MapState` helper) without needing a getter at all. The problem with the way you are using them is people end up thinking they need to create a getter for every store property, and you end up with loads of unnecessary getters just to access store props that are already exposed on the state.
thanks for the tip
I hate the extra layer of indirection with the Vuex map* helpers. I always like code to be obvious and simple. I honestly don't know why someone would mind using the full store accessing syntax when it is pure and simple and readable and you don't have to hunt down an extra layer of indirection to find out where that function your calling is coming from.
The most important Question: How did you get the glowing syntax highlight? Is this inclueded in your vs code theme or something else :D
ruclips.net/video/T_sL7SO4wMg/видео.html
Same question!!! The codes is so cool!
@@hellocheng7071 Found it: marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode
You then still need to enable Neon Dreams (Descriped in the theme readme)
The part where you explained mapGetters and mapActions and the fact that you could rename them, was insightful. Thanks!
What theme extension are you using?
ruclips.net/video/T_sL7SO4wMg/видео.html
Dude, this was so good! My team and I are learning VueX and this really helped.
You can simply use getters and actions after spreading mapGetters and MapActions by their names in template without wrapping them in objects
Victor Cozhuhari yeah I know, but I wrapped them in objects so I could change their names
clean and right to the point explanation, I like how you code naturally even while making videos 👍
Thank You for the VUE content bro. We needed this
Nice tutorial, but I was hoping to see how you would update the store from the page as opposed to the state updating itself.
Learn Vuex in 10 mins.
Video length: 13 mins.
Learn Vuex in 15 mins.
Video length: 18 mins.
Haha yeah it went a few minutes over, but if you subtract out the sponsor it's closer!
@Kapil ... You should be happy (!!) with all the effort Erik does... #JustSaying ...
@@johnnydriesen7575 bro, i am. I was just being silly.
@@ProgramWithErik Hey thanks for the video. I was just getting started with axios in VueJS and your video was great help.
An updated video about extensions and themes you use would be awesome!
Amazing. I was intimidated by Vuex at first but this tutorial really helped me. Thank you.
Don't know if it's an inside joke or whatever, but it's spelled like this: "(a)synchronous"
www.merriam-webster.com/dictionary/synchronous
www.dictionary.com/browse/synchronous?s=t
dictionary.cambridge.org/dictionary/english/synchronous
It will be nice to see the tutorial of setting up the shared state for simple projects with Vue.observable
The Vue syntax is weird af. Totally inconsistent and has terrible naming conventions.
Are ...mapActions and this.$state.dispatches the same thing? Or there is difference?
which extension are you using for higlighting color for some codes
Any idea what extension is used for those colorful neon fonts?
Very quick and not really informative video...instead of explaining what's what you just sprint through the stuff without letting people understand them properly. By just copying your code I won't learn anything bruh
Sorru Bruh! This is free content , if you don’t like it go somewhere else!
Do you prefer Tailwind above Vuetify n Qarsar?
excure me,what's the vscode plugins
What would be the difference on storing state at the root vue level and read/ update from all children vue components? To me, vuex is too verbose just to read write “global” state vars
Vuex is suited for more complicated projects. You can totally set up shared store without all those bells and whistles with Vue.observable
please what is your theme name in vs code
A quick way to refresh Vuex, to the point. MapState helper fn could also be added for completeness.
Oh yeah, that's true!
as cool as this colours are very difficult to follow up
What theme extension are you using?????????????????
did anyone get the two peanuts joke, didn't get it :(
I had a ridiculous amount of trouble getting this to work. Store was never recognized.
What was the problem? I'm having It too, cant acess getters because store is undefined
That keyboard thock is beautiful
Why do you say gitters instead of getters? xD
You just doing yourself & showing quickly. Not teaching others ;)
THanks for the tips!
Why do I feel like this is a joke😄😄
thankyou eric, awesome
Best Vuex tutorial I've ever seen
Amazing. Thanks a million.
This was amazing. Great job explaining everything, Erik.
Glad you liked it!
very good video，thank u
Hi, I wanna get data from the store, make some calculation then pass it to the template. how can i achieve it?
i laughed at that fish jokes
Which extension is that?
Helped a lot .. Thanks
Very nice, thanks.
To answer everyone's question, the name of the theme is SynthWave '84. It was in his top themes video (ruclips.net/video/IX6ADPY52Io/видео.html). To enable the glow, you have to press Ctrl+Shift+P and enter 'Enable Neon Dreams'
For the actions functions, they take in the store as the first argument, not state. I think you made a mistake on that side Erik. Great tutorial overall though :)
8:30, if you run into to that problem, stop, think about your poor life choices, take a nap, eat well, paint some UML diagrams, and refactor your way out of the messy race condition you've made.
One of the few people I feel like slowing down. Gj.
so cool thanks Erik
I just learned that we shouldn't use index as v-for key attribute. There is a great article on this topic by Michael Thiessen: michaelnthiessen.com/understanding-the-key-attribute/
Hope this helps!
Great Tutorial!
Too much boilerplate. Mobx is the only sane state management solution. Everything else is just ridiculous.
Getting an error that looks like this? "npm ERR! typeerror Error: Missing required argument #1"
$ npm --version
3.5.2
$ node --version
v8.10.0
Maybe try: sudo npm install -g npm@latest
Node 8 and NPM 3 are deprecated :P
So I use Angular. Started learning Vue recently. so Vue does not use singleton services? We have to use state management like redux ie: Vuex? Is this the best practice for Vue?
bro, thank you so much, I just finished the video and had an unstoppable impulse to press the subscribe button ..... I almost broke my finger lol , you are a great teacher.
Is it bad to put all my async code in actions that can be shared throughout my app. I find myself using this pattern a lot, rather then mixins, rather than putting asycn code in the component methods, i put it in async actions. btw i like the pro tip with mapgetters object.
Good vimmer! Thanks! Coming from react background can understand vuex in 15 mins!
very clean speaking, I now understand how state&stores behaves in VueJs, thanks so much, Erik
Hi Erik! Can I get the source code? Im quite new in vue js and i think your code will help me understand a lot on this state management
always on point ! ty :D
Thanks a lot!! I really needed to cram this and your explanation was so perfect and spot on without wasting time
Tquu soo much sir.. Nice and clean explanation 😊👍❤️
please make a video to show how to use vuex 4 + vue 3 + typescript + vue clie latest.
What is your favorite global or local state management in vue-apollo?
Nice exppanation dude, will be good to raise the text size.
Dude, what VS Code theme is that? It looks sick.
extremely helpful content, thank you very much for that !!!
I hope I'll win and get your course for free. I'm 15 y/o
Your videos are a big save. The only problem for me is that you don't explain much when you are doing your magic, therefore this is the main reason I wouldn't purchase your Vue.js 3 course. That's a boomer for me because I really like your topics, but you must dedicate more time to explain the things you are doing.
Thanks for the tip! I do go a bit fast, I am trying different types of videos. Maybe I'll change up my teaching style
Great video Erick and cool Vscode theme!
Should've shown how to update from payload
I like ur explaining. Thank you very much
Dude ty for the tutorial. Helped me to keep going!
Very informative and great explanation, thank you!
Great content thanks for summing it up!
why
semicolons
Exactly
Direct, simple and clear! thanks a lot, great tutorial!
How do you make your methods names glow?
That was very smooth tutorial (y)
Synthwave '84 VS code theme
clean and well explained, thanks!
Thank you, very useful info. What theme do you use in vscode ?
I saw the answer in the below comments
What is you vscode theme?
Great video, I learned a lot!
Thanks for the content. Are you on Patreon at all yet?!
I AM READING YOUR BOOK!
How to mock state data
Why do we need to use getters and not read directly from the state? Isn't it reactive anyways?
It's a bit cleaner to use getters. And you can use getters to map, reduce, or filter your results.
@@ProgramWithErik Thanks for your reply Erik! Can I ask what do you mean it's cleaner? In what way? Yup, I understand the part about using getters if you need to transform the results, but if it's just a direct use of the state, what's the benefit of using getters?
Fantastic stuff!
So handsome!
Thank you!
Awesome. I learned a lot in this video👍👍
Glad it was helpful!
Alright, that was easy. thanks
You're welcome!
The BEST as always!
Meh
Excellent teaching!
Thank you!
nice. What theme is this ?
Synthwave 84
How do you comment an entire line without selecting it?
commenting: CTRL K C
and un-commenting: CTRL K U
More info: www.google.com :)
I think CTRL + } is also for comment and uncomment entire line or selection (just in VSC)
Ctrl + /
Damnn, that was one hell of a clean explanation. I am new to vue but I have experience with react-redux and man you made my life so much simpler, thanks a lot!!
Too fast, dude! It should be a hand-holding tutorial explaining every concept and decision you make, not a video showing how fast 'you' can code.
this is not a live video; just pause it whenever you want or set the playback speed~