LEARN VUEX IN 15 MINUTES (VUE.JS STATE MANAGEMENT) FOR 2020 // DAD JOKE GENERATOR APP -VUEX TUTORIAL

hey hey developers today we're looking at view X we're gonna learn how it works and we're gonna create this cool dad jokes generator to peanuts were walking down the street one was assaulted and it also has this all joke so we could see ivory choke that we got from our endpoint and we're gonna do this all of you X so makes you stay all the way the end but first let's have a quick word from our sponsor I'm really excited today to talk about our sponsor Linode and actually make sure you listen all the way the end they have a really cool deal for program with Arik subscribers basically Linode allows you to host your own app site or project in the cloud they provide virtual servers that make it super easy and affordable to get your projects online and sharable with the world they have hosting starting at $5 it's really really cheap so whether you're an experienced developer just starting out to tinker with code you can use Linode so if you're a viewer of program with Eric you can get $20 in free credit on new at Linode accounts by signing up at lynda.com slash program with Eric that's up to four months free on the smaller plan so get started by clicking the link in the description below thanks again so let's go ahead and begin but first let's define what view X is so if you're brand new view X is a state management library system for view Jas it's based loosely on the Flex patterns that you see in other libraries and frameworks so in react they have something called redux and angular this has something called ng rx so basically it's a way to manage data and share it throughout your app so let's take a look so I went ahead and created a kind of a empty app for us to start so we can create our jokes app for us it's using tailwind CSS it's also using just a vanilla view CLI app out of the box with a couple of changes I have a home route I have a jokes route and then I also have an empty store so I chose the option when I used to be you say I to create it to create this store so let's see if we can go ahead and setup our store first so right now our app looks like this we have nothing in it this is just hard coded in and I just have some just two routes right here like I was saying so what we want in our state and now state is the information that we're sharing throughout the app so we're going to create a couple of pieces of state first we're gonna create joke current joke and this is just going to be an empty string and then we're gonna do all jokes and this is gonna be an array so we want to have every Curt joke displayed on our home route and then all our jokes displayed on our jokes route and then for mutations we want to actually set and change it so a mutation is a synchronous so I'll just make sure I put this here synchronous way to update the state in our view X store so we can have set current joke and that has a state and payload that comes with it and then inside the stain payload we can just set whatever you want so I'm going to state dot current joke equals payload so that way the payload that we receive gets set into the state forum for the view X store and then we also want to add to the all joke so I'm gonna do state dot all jokes dot push because we know it's an array of the payload pool and now we want to look at one more that doesn't normally come in here is called jitters and Gators are a way that we can grab information and display it anywhere in our app and there it's kind of nice things because we can kind of change things as we retrieve it so let's do get joke let's do get current joke and this has one option that comes with it it's called state and just will return state dot current joke cool and also if we want to be fancy here we can actually do this kind of a arrow function here and then I can delete the return and then it's just a little bit more cleaner there so get current joke and that's just gonna get the current joke out of the state now right now all we're doing is we're setting this this up so let's say let's add a current joke in here this is a joke and let's see if we can retrieve this inside our app so we have this is a joke and I'm gonna go ahead and just hide the side bar and now inside our home view we want to actually see this joke text we want to grab it instead of using this joke text here we want to grab it from the store so we can do that you can use something like a mounted hook and we're gonna have a data object first and this data object is going to have a joke which is going to be an empty string but we're gonna set this dot joke to the store now one thing that's nice since we're using Busey a line and view X is installed now we have an option to this dot store which house that our access to the whole store at this point so we can do this dot store and then we can do getters dot get current joke and that should update this joke so let's see if that worked so we see here because can I has dad jokes let make sure we don't have any errors we can look at our console here cool so we have joke text in there let's make sure we update it so we're gonna put this to joke Oh so one thing we mistake here we need to add in capital C current joke okay so it looks like it's retrieving it out of the store as we expected cool so if we go back to our home view now we have this as a joke so it's definitely grabbing the information out of the store but obviously we want to grab it from the actual API so I have an API in place so if you look at our index I already created this URL and headers so there is a website called I Can Has jokes that I can grab information out of now you're probably thinking ok so maybe I can just add a mutation right here but since we're using asynchronous information ie synchronous information always goes into the actions so this is always we can just put in here asynchronous so that's that's common confusion as people don't know the difference so let's do something called set current joke cambree we can name it the same that's fine and then with set current choke we want to actually use fetch and grabbed information so I'm going to call this Const J Jo we'll call it choke and then we'll do fetch and since I already added in this URL up here I can do URL and I have to do this headers here and just to make sure this works right I'm gonna make this asynchronous so I'm gonna do a sync here and then I'm gonna wait the fetch and then I'm gonna Const and then I'm going to wait joke JSON that should have given me the JSON and now I can do something with J I can do state dot commit and so the reason I use commit is every time you want to change something in mutation you do dot commit if you're trying to change an action you do dot dispatch so I'll do state commit set current joke and then I'll pass in J and I know this has actually it's an object called joke so we can do something like this this should commit it into this mutation here and now we want to see if we can actually trigger this action that we just created called set current joke so to do that I'm going to go into the app view and I have this empty export default so I'm gonna put a mounted hook here and this time I'm going to actually trigger that action so I'm going to do this dollar sign store and I'm gonna do commit excuse me dispatch because we're dispatching an action and we know we called it set current joke so we're gonna go back to our app view set current joke and that's it and one other thing we can do we actually have this payload here we're not using it so I'm going to delete the payload oops this is actually supposed to be an object so try it again okay so there's no errors so now we've committed it but now let's see can we grab it inside our home view so right now that you see why isn't this working right we have them mounted because there's a timing issue this mounted is being set before this app view is is dispatching so if you ever run into the problem what you want to do is use computed property so we're gonna use a computed property and we're gonna call it a joke so I'm going to go ahead and just comment this joke out here and this compute property is just gonna return this dot store dot jitters dot get current joke this one right here get current joke and then I'm gonna go ahead and comment out this mounted right here cool so now you can see it's actually loading the joke from the server so if we refresh this make sure everything's working no air is cool so we see you have it now we want to click this add joke and have a new joke appear every time you click it so how do we do that so we're gonna go back here now all this all we're doing is is just changing this computer here but we want to add do an add joke so I'm gonna create a new I'm gonna go and delete the data right here I'm gonna create new methods and I'm gonna create something called add joke and though this is gonna do it's going to just dispatch this this dot store dot dispatch and we're just going to dispatch that set current joke and so every time you click this button so we're gonna add a click event here and just do joke so every time you click it it should do this we'll call it a joke add joke so every time you click it it'll trigger this method here which should dispatch set current joke which should update the store for us so let's see if it works click add joke cool you can see here it's updating but what about all jokes so we still have our all jokes we just have this one joke hard coded in here so how do we get all jokes working so this should be easy so we'll go to our jokes route and we all all we have some export default here but we can now retrieve all our jokes so if we go back to our index file so we have a way to grab current jokes we're pushing to our all jokes we're doing our actions and getters everything's set up in here so I'm going to add in here a a computed property and that's going to call I don't know jokes and that's we're going to return this this dot dollar sign store got jitters dot I get all jokes so if we look at the index file we have current get current joke so let's let's set a new one get all let's do get all jokes and that's just gonna return state dot get all jokes that's it cool so now we have something called get all jokes now if we go back to our jokes view we can now should be able to do a V for in here so we have this H four here we're gonna do V 4 equals joke in jokes and remember we have to do it we always have to put a key since we're using a V 4 here so I'm going to do joke index and then I'll do key here equals ID X and now we should have access to this so we can do here this will be ID X plus one and then step here we'll just do joke so let's see if that worked so now we have our jokes here we can add jokes and if you click all jokes now they're appearing it looks like we hard-coded in the 1 there I'll fix that yep here we go so now we have all jokes now every time you add a joke what do you call a fish no I a fish says no I in it but and now you can see here and now it's listing in our all jokes page cool so we definitely did it but we can make this a little cleaner so we're kind of using this dot store everywhere but there's actually view X helpers so let's go back to our app view here instead of doing set current joke here let's import map actions from view X and now we can do methods here and inside this map and methods we can do a pad map actions and then we can put in an array and this array would be set current joke instead of doing this dot store dispatch we can do this dot set current joke and do it like this so if we do like that let's see if it still works refreshing it cool still works all right so we can do that everywhere we can add these helpers everywhere so we can go to home view we're once again we're doing actions here so I'm just go to my app view and copy and paste it and put it in my home view the map actions and then inside here we'll have to put in the actions we want so except current joke and then instead of doing this we'll do this set current parent joke and that that should be it so let's see if our add joke still works cool still works and we can do the same thing with this computed property so instead of map actions we can do map getters map getters and in here we do the same thing we do math getters here we do the three dots in front of it because we're a user we're spreading it excuse me and then once again now this is going to be a kind of a problem because we have something called git so if we put in an object here it's always a method or it's either an object or an array and we do get current joke but the problem is now this if we do this return here we're to returning this store dot getters that current joke so we could do this instead this store store get er so we can do return this dot get current joke like this and this would work so if we go back here so this is all working here in our home view we add it here but it probably make more sense that instead of this joke here being this stock current joke we wouldn't want to have this method at all so there's something we can do here we can change this to an object oops so we change this to an object if I can do this right and then in this object we just you can set the name of it so I just want to call this joke and then I can just comment this out and now if we come up here refresh it you can see it's still working so cool so now we've gotten made it a little bit simpler but what about this set current joke could we do the same thing here so instead of we have this add joke button here so why don't SEP we do this we change this to an object let's see here this is an object and then we call this add joke add joke like this and we come in at this let's see if it still works yep it's still working as we expected so we haven't broken anything which is really cool and now we don't have to have these extra methods here awesome so the last one would be jokes view and same thing here is usually if it's just one it's not that big of a deal okay so we're doing same thing here with the getter so I'm just gonna copy and paste this into our jokes view and we just need map getters cuz that's all we have in here and then instead this jokes here we're going to do this map getters and then we're gonna have an object inside of it and inside that object we're gonna call this jokes and that's gonna be part of get all jokes and just to fix this well fix like this cool so let's see if that worked so refreshing it add joke all jokes cool still seems to be working all right so you that is basically it some we've used view X methods we've used actions we've used mutations we use getters we used all the things you should know for view X if you guys liked this video make sure you click that subscribe button below and also I have a course on view you I'll go ahead and put a link in the description below if you click on it I'll let you know next time it's available and you can sign up so I'd really appreciate it if you guys like these videos here are some other videos may like go ahead and click on them I really appreciate it thanks [Music]

Channel: Program With Erik

Views: 74,617

Keywords: Vue.js Tutorial, Vuex 2020, Vuex Tutorial, Vue.js State Management, vuex crash course, vuex modules, vuex store, vuex axios, vuex getters, vuex actions, vuex best practices, vue.js tutorial for beginners, vue, Learn Vuex in 2020, Vuex by example, Learn Vuex in 10 minutes, Learn Vuex in 20 Minutes, Learn vuex in 15 minutes, Vue 3 vuex, Program With Erik, Program With Eric, Erik hanchett

Id: oxUyIzDbZts

Length: 18min 2sec (1082 seconds)

Published: Mon Jun 15 2020

Reddit Comments

[u/plainblackguy]

Maybe it was just time. Maybe it's because I finally have a project where it makes sense to use Vuex. But maybe, just maybe, this video was the secret. And if so, I figured I should pass it on to others like me who struggled to wrap their heads around Vuex.

[u/AceBacker]

First try to use redux. Soo much configuration to use things in your stores. After that vuex seems like the easiest thing ever.

[u/sanjibukai]

Grok'd?

Can anyone explain the meaning? Not native english here..

[u/Towerful]

Wait...
Setting a getter to a data prop on mounted? Is that the 2020 way of doing it?
I just use computed props

[u/wishinghand]

I had a similar issue where Vuex never quite made sense, and then one day it just did. I really couldn't say what put me over the top, but I'm glad it's easier than Redux, now that I've had more experience with other state systems.

[u/iFBGM]

What does grok’d mean