STATE & STORE | VueJS & Vuex | Learning the Basics
ฝัง
- เผยแพร่เมื่อ 13 ต.ค. 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).
'The' best tutorials on Vue.js and Vuex for beginners. Every detail CLEARLY explained at a comfortable pace!
Been a software developer learning from this channel since 2018 and still loving these videos
What a wonderful explanation from 7 years ago!
The way you demonstrate tough task in such a easy way,, its amazing !! You are super hero
Thank you so much Sagar!
Since i started following your videos, I'm always satisfied. This's a best one too.
Thank you so much. This video save my life from my senior project.
Great explanation Max, after this one I had to watch all the series!! Really nice. Thanks a lot!
Great to hear you enjoyed it! :)
Man this is incredible... I watched you because I wanted to learn more about node and express. I really enjoy your videos. Today I got 3 months on pluralsight from microsoft for free and I saw you just released a course there! Awesome! Keep on rocking!
Indeed, I did. Actually I got three courses there (not on NodeJS though). Very happy to hear you're enjoying my content! :)
Comprehensive introductory video @Academind! As a somewhat more experienced React / redux guy I would've liked an initial introduction into state immutability, its advantages and how to achieve it by means of e.g. Immutable.js or seamless-immutable. Most often, libraries initially seeming more cumbersome than favourable are neglected by beginners, who'd profit the most from a firm introduction when just getting started with the eco system.
Trotzdem top Quali und super Video :)
Thanks a lot for your feedback and suggestion, much appreciated! I'm happy to hear you enjoyed it :)
The quality of these videos is awesome. Convinced me to buy the Udemy version!
So happy to read that and welcome on board of the Udemy course Harrys!
as usual, very detailed and well explained. Especially good to know what kind of problem does is solve - without and with Vuex (before/after) the comparison on contrast. Thank you!
learning something new without even looking at a manual. pretty cool. thanks.
Amazing to hear that, thanks so much Jinseok!
I think starting from the beginning(no markup, no js) would be better. It's a little bit confusing once you start changing existing code.
But how would you start a Vue.JS (
Mindspace you didn't get my point) I don't except to be taught html or js from 0. I mean if you start project then start it with scratch.
This video is part of Vuejs series (playlist). Start with the first video, there we'll start from scratch.
Mindspace thanks)
Academind
With a british accent, you're practically that guy in the IT Crowd Show
Can you please make complete lessons for nuxt ? I have tried it and it's so good.. it is hard not to fall in love with.. please consider having Nuxt lessons as there isn't any out there at all!!! And I would love to learn from you Max.. you are just great in explaining stuff :D I'm gonna make sure to watch all your Vue and related videos (hopefully Nuxt) here on youtbe and on udemy :D
Nuxt is definitely coming to this channel, no worries
Thank you!!!!
nice, I got my data in vuex global state! just what I wanted to learn, thanks
Thank you, thank you, thank you! I've been putting off learning vuex as it seems a bit of a minefield. These videos are AWESOME. You are a really good teacher. Great explanations made it all finally click into place. I'm excited to getting going now. One question (I know YT isn't the place for this), if I am pinging an api with an async call to fill up my state, should this call be in the component that needs the data? Or is there a better place for the call? I understand actions are what I need, but do I call the action in the ready/mounted function?
Thanks for your awesome feedback Toby! I'll actually get to async tasks later in this playlist - you could use "actions" for this. Again, I have a separate video on that.
i dont mean to be so off topic but does someone know a tool to get back into an Instagram account??
I stupidly lost the login password. I would appreciate any tricks you can offer me
@Avery Raylan instablaster ;)
@Chance Parker thanks for your reply. I got to the site on google and I'm trying it out atm.
I see it takes quite some time so I will get back to you later when my account password hopefully is recovered.
@Chance Parker It did the trick and I actually got access to my account again. I'm so happy!
Thank you so much, you saved my ass !
Can't wait for the next one! I really like vuex, although I think it adds unnecessary complexity, it should be more easier to handle. Vue should implement a native way to handle states imho.
Vuex kind of is a native way. Don't forget that it may seem very complicated as it isn't used on a big app here. You only have that initial effort of setting everything up, then it really scales well and helps in bigger projects.
Hi! Loving your tutorials and Vue.js. By "State" does that mean the status of the document such as meta-data about the application or can this also be used to store global data such a customer's quote during a multi step quote process?
I just want make sure that I'm using this for the right reasons. Thanks!
Happy to hear you're liking the videos! :)
State simply means your application state - that can be anything from some meta-data you need in your app to the state in a multi-step form. So definitely yes, you can use it for that
Brilliant thanks! Now that I've been looking at it for a week or so and I have a better understanding of it I can see how much simpler it is than both Redux and NGRX/store. Vue is just so much more approachable for a new comer. It's just a shame that there's not many Vue.JS jobs so I'm biting the bullet and learning Angular 2/Ngrx/store
Loving your videos thanks for the hard work :-)
Great. Clear and excellent setup. Example of a good video.. and yeb... when is part 2 ? )))
Should be out by now ;) Thanks a lot for your great feedback!
Special thanks for the good diction, understandable and legible English)
Thank you, happy to read that you liked the video!
Hi Max, how can I have a dynamic state, state from an api call using axios? should I use actions and there pass the result of an api call to the state? thanks
The best teacher. I buy your vue and vuex course on udemy and was amazing. Lets continue learning
So awesome to hear this, thanks so much for your feedback! :)
im not strong in eng, but i clearly can understand your spech
thank you for those video series about Vue JS
Thank you so much, awesome to read that you liked the series :)
me too
nice tutorial. it clarify basic concept in vue2, thanks
Great to hear that Wu, thanks so much!
my favorite channel
So awesome to hear that, thank you so much Mominul!
I bought your vuejs course in Udemy about a week ago. Now I just started going through it. I wonder if the Udemy vuejs course is updated or it is still using the old version of vuejs?
The course is up-to-date and uses Vue 2. I'll update the course to Vue 3 once it is final though.
VERY GOOD. THANKS! thanks a lot for take your time to do this.
Happy to hear you're enjoying the video Kevin!
Brilliant work. All of it. Thank you.
Thanks so much Brendan, awesome to read that :)
thank you. today i brought your course in udemy . i am looking forward to learn more from you.
Thank you very much for your support Nabin. I really hope you will enjoy the course :)
Thanks for these tutorials. Really helpful!
Great to hear that, thanks for the nice feedback!
Thanks for vuex explanation😃
Thank YOU for your comment Sathish!
Do Node JS and Vue JS have same level ? (I mean the functionality)
If it so, what will you recommend for me ? Because I don't want to learn both of them if they have same level (or Do I have to learn both ?)
NodeJS and VueJS do two totally different things, that's extremely important to understand!
NodeJS = server-side
VueJS = client-side (browser)
The both use JS, that's something they have in common. And both are great languages/ frameworks for their respective tasks
Thanks for these tutorials!
In method "registerUser(user){...}" written "user.registered = true"; how it work reactive with store???? Thanks!
Hi! Randomly stumbled over this video, even though I've only just reached the monster slayer project in your udemy course (5/5 so far!!!). Just a random question; which IDE are you using in this video, and the ones on your Udemy course? Looks very pleasant. Thank you!
Great to hear you're enjoying the Udemy course! :)
I use Webstorm by Jetbrains. In its latest version (EAP 2017.1) it even supports Vue.js out of the box!
Thanks for this amazing guide, you helped me a lot starting with Vuex.
Really great to read that the video was helpful for you, thank you so much for sharing this :)
Hello! I have a noob question. Can i only get Vuex by doing NPM install? There is no script for it, yes?
Why aren't you with Vue.js on Pluralsigh ? Since you´re instructor there?
Cheers, your videos and courses rock!
They wouldn't let me create a course on it ;)
:(
I recommend you to subscribe to safari books, they have books, videos, and also they are up to date
The BEST as always!
The two component names, "Registration" and "Registrations", are too easy to confuse people who are learning new concepts. Maybe it would be better to name the components with a more distinctive name.
Thanks for your feedback, I'll try to be clearer the next time!
Great explanations!
Thanks again for your great feedback!
Doesn't accessing the store like that (even read access, not necessarily mutation) reduce the portability of your components?
It depends. You can also build apps where you only got a handful of components (=> containers) which are connected to the store and which then distribute the data fetched from the store via props to child components.
I have done similar app, to met with vue, but in my component (router-link) i cant access data from store. This is the pice of error " Property or method "users" is not defined on the instance but referenced during render. " Could you gess what i forgout about ?
Are these tutorials different than Udemy Course?
Yes, these videos were recorded separately. They should provide a great introduction to VueJS but of course they don't go even close as much into detail as the Udemy course does.
Thanks so much for your amazing feedback! I'm really very happy to hear/ read that! :)
amazing video mate! thanks a lot
Happy to hear you're liking it! :)
Hello from the future
This video is still helpful 😁
please make tutorial vue server side rendering.... i can't understand how it works
look into NUXT
thanks ;) interesting
You don't understand the concept? Just use a framework.…
use laravel with vuejs for server side. problem solved
with express.js
Great video. but the git repo is empty. Would like to follow along.
Sorry, my bad - it should now be online!
Mindspace , thx for the code.
Great Video. Thanks
"export 'default' (imported as 'store') was not found in './store
warning while compiling
I would like to know if the source code of these tutorials is available in github?
Yes it is, you can find a link in the video description, just make sure to pick the right branch there.
There is no source code on GitHub Repository linked in video description (
Sorry, my bad - it should now be online!
thx a lot)
Are you answer on feedback on udemy.com ?
I do reply to threads in the Q&A section and to messages, yes. I can only reply to course-related questions though.
Thanks, This great.
Thanks for your amazing feedback Mustafa!
Hi tnx for tutorial. Is there any way to commit a mutation from within main.js file?
Yes, you can directly access the store object there
Academind Could you plz give an example. I tried this.store.commit () but didn' work.
Not this.store but in the main.js file you should have a store constant which you used to add the store to the root vue instance. Use this one.
Tnx u saved my life 😉
I want to include bulma in this project. how can i do it?
As i understood Vue cannot work with immutable data
It can, you can use Vuex in an immutable way (simply change your state by setting a new one in your mutations). It's just not a required paradigm
Thx!
Thank YOU! Happy to see you're liking it!
Vuex is a way of entering your house before closing the door
Can you please help me out
What I am trying to do is read links on my page,
the links contain userId, I want to use the userId to get other related post from the same userId,
The problem is to read the new route with watch so it can update the page
I managed to get the Values with object.values() function.
it displays the following log:
New value: /index/3?uid=1,,[object Object],viewArticle,/index/3,[object Object],[object Object],[object Object],,/index/3?uid=1
I am stuck with trying to change page dynamicly with wacth
{{ blog.title }}
{{ blog.body }}
title: {{ item.title }}
text: {{ item.body }}
import axios from 'axios';
export default {
components: {
UserItem
},
created() {
console.log(this.id);
axios.get('jsonplaceholder.typicode.com/posts/' + this.id
).then(response => {
this.blog=response.data;
console.log(response.data);
});
axios.get('jsonplaceholder.typicode.com/posts/', {
params: { userId: this.uid} }
).then(res => {
//const uidArt = JSON.stringify(res.data) ;
const uidArt = res.data;
this.related = res.data;
//this.related = uidArt;
//var artikel = uidArt[0];
console.log('artikel 1 id: ' + uidArt[0].title)
console.log('artikel 2 id: ' + uidArt[1].id)
console.log('artikel 3 id: ' + uidArt[2].id)
console.log('uid log: ' + JSON.stringify(uidArt) );
});
console.log('uid:' + this.$route.query.uid);
},
data() {
return {
id: this.$route.params.id,
uid: this.$route.query.uid,
blog: [],
related: []
}
},
watch: {
$route(newVal, oldVal) {
console.log(`New value: ${ Object.values(newVal)} `);
console.log(`Old value: ${ Object.values(oldVal)} `);
}
}
#single-blog{
max-width: 960px;
margin: 0 auto;
}
As I understood Vuex is some sort of Redux for Vue.js, isn't it?
Yep, this is correct
@@academind should i always use vuex?
Bro, how the f%&§% kriegst du das v-for OHNE key hin? Bei mir wirft der scheiß immer einen Error und bei meiner Webseite zeigt es dann nix an
I don't think it was a good idea to start with showing how to manipulate the store directly (when I presume we will get to reducers soon).
I see your point, but I find it very important to develop the idea behind Vuex step-by-step and not jump into the finished product right away. Especially as I emphasize that you don't really do it this way.
Ok, I've now watched the rest of the videos (possibly the best course I've ever seen in youTube), and see that the original code was very close to what you needed in the mutations. I had assumed Vuex would be more Elm Architecture / Redux-like, i.e. with pure functions. Apologies
where is github project? it is empty
Sorry, my bad - it should now be online!
okay. sounds a bit hard. but i'll get into it.
apply the code visual studio pls take iteas
Hello, I have a project on laravel 5.4 and I need to create replies to post, something like FB. Please how do I do something like this
@foreach($posts->replies as $reply)
ypeError: Cannot read property 'state' of undefined
Thanks!
I had the same error. Do you know why I had to change it?
2016 year . your code does not work yet
Does anyone know how come our app root component knows what & are child components?
prntscr.com/f4d8rn
I dont get how that HTML TAG is linked to that components. Any help will make things more clear to me, and ofcors help me. Thank you Max for making this tutorials, gonna enroll to your Udemy course also (after i go through this ones).
Лайк из России с Любой )
tabs vs spaces
spaces
more likely controllers of laravel
pls replay me