Vuex Crash Course | State Management
HTML-код
- Опубликовано: 29 сен 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
Lets Go!! Brad don't stop ever!! Thank you sir.
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.
great course! quick, detailled & helpful, even if you never worked with state management
... not sure Filter Todos is a right wording
... It is a limit on a fetch request...
Filter would be in getters? Right?
filterDone state => state.todos.filter(todo => todo.done)
displayLimit state => limit => state.todos.slice(0, limit)
This way the state will still have all 200 from original request, and just limit the display
Or I might be using getters incorrectly
8:30vscode, extension,vetur
I cant get the todos list from axios into the todo component. I get this error:
[vuex] unknown mutation type: setTodos[object Object],[object Object],....
found it. in fetchTodos, commit command was not written correctly
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_
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
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.
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...
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.
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?
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 .....
Thank you for providing so much value to the community!!! 👍👍👍👍👍👍👍👍👍👍👍👍👍👍
You're very welcome :)
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
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'])*
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 :")
Brad is a mind reader... Just opened vuex docs yesterday and still on it, then he uploads this video :D. Thanks Brad
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!
nuxt js next please!
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
Are you going to do a Vue.js Udemy course? If you do sign me up.
has jsonplaceholder been really slow for anybody else recently? takes like 59 seconds to get a response from the server which usually fails
40:38 bookmark
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.
8:46 "scafold(tab)" changed to "vue(tab)"
Great timing , just learning vuex myself :) so this should be very helpful, will we be seeing a nuxt crash course soon? Hope so!
instead of "scaffold" type "default"
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
Thanks, i'm a working developer and this tutorial is industry standard. Learnt a lot.
Is there a library that will allow me to translate this latin to english before it is displayed?
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!
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!
I love to watch your tutorials. I am facing problem. Whenever I import a module that is not used for eg. I imported axios here, so it gives me an error axios defined but not used. Do you have any solution to this problem. Then when I follow along, I have to remove that import statement
Go into Project Configuration>ESLintConfiguration>Rules>vue/no-unused-components and turn the slider off in the vue CLI (also turn off vue/no-unused-vars). This way you can follow along without interruption. (You can also turn off ES Lint on save, but I like keeping it because it helps point out errors)
Be sure to flip them back on when you are done following the tutorial, this way you have the ES Lint working at full capacity to help you with your own code (esp the unused vars)
@@Slipstreme Ok. Will do it. Thanks
24:50 I am getting Uncaught (in promise) TypeError: this.$store is undefined. in the console. I am using VUE 3. #help
hy brad can you create vuex-orm am having hard time understanding it... tnx
does any get this error ?
==> [vuex] unknown getter: allTodos
I had the same error, I found that in the index.js file I had misspelled the word modules as moduels. After fixing my typo it worked perfectly. Hope this helps!
23:38 in case that someone may not know what the spread operator means and how it works stackoverflow.com/questions/48091687/how-exactly-does-the-spread-syntax-work-with-mapgetters
I love you man, I own you a beer
vuex version 4 do not work with vue 2 😀
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?
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
Anyone else having trouble with jsonplaceholder? I keep getting the CORS error. I only get the error on the POST method. I've already tried the no-cors herokuapp proxy but it's still not working..
Having the same error:(
@@naokobanana4291 I ended up creating my own api. I tried everything but I couldn't get the json placeholder to work
I've got to re-run the server after putting the first actions and get the todos from jasonplaceholder.
same
Anyone using Vue 3. The index.js stuff at 12:31 won't work. gitter.im/vuejs/vue?at=5f5f2fded993b837e06179c0
From link:
"it is because you're using Vue3. There is no use on Vue anymore.
Check out v3.vuejs.org/guide/migration/introduction.html and especially v3.vuejs.org/guide/migration/introduction.html#breaking and specifically v3.vuejs.org/guide/migration/global-api.html#a-new-global-api-createapp
tl;dr: use is now part of the application API, that means:
import { createApp } from 'Vue'
const app = createApp(/* ... */)
app.use(/*...*/)"
can't call API for post & delete on my local
Access to XMLHttpRequest at 'jsonplaceholder.typicode.com/todos' from origin 'localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
does anyone know how to solve it?
I think is a bug because the added todo cannot react on click to mark as complete ... if I use it with the last packages I got this: warning "export 'default' (imported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, Comment, EffectScope, Fragment,"
Anyone care to explain further what's happenning at 47:47 const limit = parseInt(e.targer.options[e.target.options.selectedIndex].innerText); please explain as simply as possible, thanks
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
}
});
Big help bro..best content...
The UpdateTodo doesn't work on a todo that you add. It throws a 500 error. My understanding is, the todo I add is added in the UI but not in jsonplaceholder so when you try to do this (const index = state.todos.findIndex(todo => todo.id === updatedTodo.id);) it doesn't find id=201 because it only exists in my state....Am I understanding this right?
* Also if you're using Opera. I feel I'm the only dev on the planet that uses Opera but it's powered by Blink, same as Chrome, and Chrome extensions from the Chrome store will also work 99% of the time with Opera.
Hello Brad. I really enjoyed your videos. May I ask if you ll do a Nuxt Crash Course?
An allTodos:"(error during evaluation)" at 18:52 .Who knows how to fix this
fixed
@@gilbertintabo160 How bitch
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
I have been faced typeerror-cannot-read-property-getters-of-undefined-when-serving-on-vuex-4, how do i fix this
Hey Brad, RUclips automatically translates your video title to Indonesian and it looks so awkward. How can I fix it? Thanks!
when building a vuejs/electron application, would you still employ vuex or rather pass everything through ipc?
Sir I love your Videos, but Have it in mind that the next generations won't forget a Hero like you..
I am stuck.at the part of the tutorial where the delete icon was added. I am unable to delete any of the todos, I keep getting the error:"TypeError: Cannot read property 'id' of undefined"
did you type id or todo.id ?
nice video, vue is easy, but I really think anything Javascript and its frameworks is a big huge pile of f*cking mess, gosh I hate this language
Hi everybody .. the event passed to filterTodos isn't working nor any param I do pass to the action filterTodo it simply console logs me an object with getters and setter ... you help please
Event Modifiers = v-on:submit.prevent
Thank you for that. I was doing this tutorial in July, 2020 and your solution fixed the old (e.preventDefault(); ) problem, where my state.todos was not updated correctly
24:02 can someone explain to me the difference between computed property and computed function.
Edit: it was an error..was so confused hehe
Lol
I'm getting an error too, says "Duplicate key 'computed' no-dupe-keys" how did you go about it?
So used to immutable array operations in ngrx that when I saw unshift or splice my eyeballs went out of orbits ;-)
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
Idk why but i always dance whenever i hear your bg intro HAHAHA
So we have to know about Redux before this video? I'm going to find a better source smh.
Good tutorial. Maybe some similar Pinia course which is trending now?
Literally stumbled upon this problem in my project, glad to find vuex
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.
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.
just want to say I hate vuex with a passion. I'm sure that I'll get it, but right now it's pure hatred and confusion
Maybe you should have populated the filter values from an array property on the control then you would not need to use vanilla javascript which is ugly
Tried using the fetch API instead of Axios. Lets just say next time im going with Axios 😂
Referencing module's getter by string for me is just a horrible idea :/
FYI, scoped in style tag is deprecated. shouldn't be used.
every time any instructor builds his course/tutorial around TODO example - 1000 kittens die :(
I do a quick search for the 'computed' lifecycle method...
Why should we use spread operator for mapActions? i dont understand that part.
anybody having CORS issue on Post request ?
25:00 Json placeholder api call remains pending and no response is provided, anyone have tihis problem?
Legend says he's still suffering from some sort of throat infection. Anyways, great video :)
Just like aways, I've learned a lot here! Thank you, dude!
Thank you so much! After watching the Vue Crash Course and this one, I immediately became a patron. Love your content!
Another fantastic tutorial! Thanks brad!
Just really need to thank you cos you make things seem super easy, Kudos
The number of times you said todos in this video is bigger than the number of seconds in it hhhh thanks ur very good teacher brad
This is not beginner friendly at all. There are so many things not being explained.
By the way, after adding a user change feature to the base code of the video based on the filterTodos code, I found out it's best to use event.target.value for getting the value of the selected option.
yeah I think of it too
please make a video to show how to use vuex 4 + vue 3 + typescript + vue cli latest.
Thanks. It has really helped me. I really like your videos.
34:58 title not showing in component, when i console it showing, but not rendering...
why the todos is not showing by 3? it only show by 1 it spread across the screen
Hi sir, how I can call action function on page load pls help.
Damn dude, what a lifesaver! You are the best.
You are the best teacher I've come across... Thanks for keeping it real. Respect
Hi. Bought your course on Modern HTML & CSS from the Beginning, but UDEMY is failing to play the content. Just spins. I have reported to them, but you might want to notify them before you start getting refund requests.
I came from angular, how do I explicitly set an object in a state to be a signature from a certain class? for example, I will have a user class model - export class user {id: number, name: string}. In a state, I will have myUser property in type of user class. I don't want just to write object on the fly but an explicit object. for example ... state : {muser: user {id: 7 , name: 'Hello'} }, or at getters return array in type of users, etc...
in angular its pretty straight forward. thank you.
Used the IP address instead of localhost.. clearly a cop
Hello, thanks for the amazing explanation, but why did you assign onSubmit function to the submit handler, but you call the functions for onChange and onClick? do we need to call the function or just assign it?
A loading icon should be shown for every request sent.