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.
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!
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 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!
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.
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');
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'])*
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
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!
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.
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
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
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.
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 :")
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!
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.
Creating store & adding module inside the store at 12:40 did not work for me. The below one did: import { createStore } from 'vuex' import todos from './modules/todos'; // Create a new store instance. export default createStore({ modules: { todos } });
At 46:44 when I console log the event I get: {getters: {…}, state: {…}, rootGetters: {…}, dispatch: ƒ, commit: ƒ, …}. How do I resolve this? Because I am unable to get event.target
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 :-)
on min 54:35 , why didn't you just used the map function from the array object to iterate through and returned the correct version of the updated todo? Just trying to understand a reason why you didn't use that, and take into account other considerations to prevent mistakes in my own code?
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
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.
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.
@@vivekbhatt26 OMG!! Thank you so much! For the last 1.5 hours I am trying to fix this... I can now continue with this tut. Can you tell me why is that / a problem? Thanks man!
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.
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!
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!
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...
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.
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!
Lets Go!! Brad don't stop ever!! Thank you sir.
Brad is a mind reader... Just opened vuex docs yesterday and still on it, then he uploads this video :D. Thanks Brad
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 .....
Thanks, i'm a working developer and this tutorial is industry standard. Learnt a lot.
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.
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
Sir I love your Videos, but Have it in mind that the next generations won't forget a Hero like you..
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!
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.
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
Subscribed to this channel like 8 months ago. Dont regret it at all.
no one else is uploading consistently like brad on youtube. the absolute GOAT
your tutorials help me a lot for my first job as a software engineer. I'm grateful to Traversy media
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'])*
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
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
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!
Brad, I am not only learning new things from you but also the coding structure you do is very clear and easy to understand.
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
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_
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.
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?
It is one of the shortest and best videos to learn using Vuex in your projects, Thanks Brad and thanks Traversy Media
Much appreciated. Thank you for the quality and no annoying selfies. Best of luck.
Thank you Brad. We are so so lucky to have you and i wish you success in all your projects because you deserve it.
you're the only one who describes things clear. thank you
Our team is switching to Vue and this tutorial has been super helpful for me. Thank you so much!
These crash courses are absolute miracles!!! Enough to get you started without leaving a confusion :D
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
@@f000ghk Even junior can rebuild React app to Vue, but Vue to React don't.
this channel is guaranteed to be a subscription. Keep going and I wish you a lot of success.
Literally stumbled upon this problem in my project, glad to find vuex
This is the best video ever for learning VUEX in such a short time. Thanks a lot! Keep going!
You are the best teacher I've come across... Thanks for keeping it real. Respect
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
Thank you so much! After watching the Vue Crash Course and this one, I immediately became a patron. Love your content!
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
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.
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 :")
Clear and concise walkthrough. You got me a job Brad. Thanks.
Thank you for providing so much value to the community!!! 👍👍👍👍👍👍👍👍👍👍👍👍👍👍
You're very welcome :)
Great to see sucha massive tutorial dedicated solely to vuex. Well done
Edison didn’t sleep 8 hours per day because, he didn’t ask internet for an advice. Hard work has no substitute. Thanks Brad.
I'm just starting with vuex , this tutorial comes very handy !!! , i like the way that you explain man.
Brad this tutorial was so clear and informative! Keep up the excellent work!
Thank you so much Brad, your content is one of the most educational content on TH-cam, thank you.
Thanks Brad, was pulling hair after moving project to SPA with vue-router, this is the way to go!! :)
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!
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, this helped clarify a few things for me. State management can be confusingly awesome.
nuxt js next please!
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.
48:24 Why don't you just put a v-model on the select, assign it to a variable limit and then add an onChange and call filterTodos from there?
I recommended your channel to my friends who are interested in web development,
I'm so thank you for good video share 💖💖💖
Creating store & adding module inside the store at 12:40 did not work for me. The below one did:
import { createStore } from 'vuex'
import todos from './modules/todos';
// Create a new store instance.
export default createStore({
modules: {
todos
}
});
Brad love you man. The way you describe those stuffs it looks like wow how easy was that.
you are doing an awesome work!, I have recommended your channel to lot of friends to learn and move forward in career.
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!
8:46 "scafold(tab)" changed to "vue(tab)"
At 46:44 when I console log the event I get: {getters: {…}, state: {…}, rootGetters: {…}, dispatch: ƒ, commit: ƒ, …}. How do I resolve this? Because I am unable to get event.target
Ok never mind, realized this happens when you try and get the event without a commit in the async function
@@andreminnie5981 Thank you, saved me a few minutes with this comment
jsut complete right now,step by step......thank you man
Sir, you seriously rock! Very well explained in a relaxed and clear way.
great course! quick, detailled & helpful, even if you never worked with state management
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 :-)
Just really need to thank you cos you make things seem super easy, Kudos
Great timing , just learning vuex myself :) so this should be very helpful, will we be seeing a nuxt crash course soon? Hope so!
on min 54:35 , why didn't you just used the map function from the array object to iterate through and returned the correct version of the updated todo? Just trying to understand a reason why you didn't use that, and take into account other considerations to prevent mistakes in my own code?
Thank you very much Brad for your passion and knowledge sharing. Greetings from Brazil Vuejs Community!
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
34:58 title not showing in component, when i console it showing, but not rendering...
Damn dude, what a lifesaver! You are the best.
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
So clear and concise, as always ! Thanks a lot Brad !
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.
this crash course is very nice, i so understand everything about vuex. thank you very much sir.
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.
at 19:00 I am getting error" [vuex] unknown getter: allTodos vuex.esm.js?2f62:897 "
Have you fixed it?
@@srdjagunjic yes import store from store/ the / was missing
@@vivekbhatt26 OMG!! Thank you so much! For the last 1.5 hours I am trying to fix this... I can now continue with this tut. Can you tell me why is that / a problem?
Thanks man!
if anyone else is suffering from this, I made the mistake of importing the Todo vue instead of the todo.js file in the store index.js
This has been life changing to me .. thanks man.. God bless
fantastic tutorial. perfect speed and everything is super clear.
Just like aways, I've learned a lot here! Thank you, dude!
Hi from Peru, thanks for sharing this awesome course about VUEJS
Yes, I've been waiting for more VueJS from you :)
and now we are waiting for more VueJS tutorials from you
25:00 Json placeholder api call remains pending and no response is provided, anyone have tihis problem?
Your content is amazing, Simple and very effective. Keep it up.
Another fantastic tutorial! Thanks brad!
14:20
1:8 error 'axios' is defined but never used no-unused-vars
24:50 I am getting Uncaught (in promise) TypeError: this.$store is undefined. in the console. I am using VUE 3. #help
this tutorial is just golden, thank you so much
Amazing. Thanks to you I understood all the topics about Vuex.
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.
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!
Idk why but i always dance whenever i hear your bg intro HAHAHA
Excellent tutorial! I noticed that removing some await(s) fixed the timing issue
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!
A nice tutorial. Simple, concise and well explained.
This tutorial helped me a lot!
Valuable tips.
Thanks for sharing your knowledge and time.
Success in your projects.
I know this video is a little old, but how do you add Vuex to the a Vue3 main.js? There isn't like a new Vue() function in my main.js