Learn Vuex in 30 MINUTES! (Vue JS 3)

in this video i'm going to show you how to get started with view x and how to move all of your apps data and methods into a view x store into state mutations actions and getters in around 30 minutes if you're new here my name's danny i'm an indie app developer and creator of fudgit if you want to learn about vue.js web development app development and all that good stuff click subscribe and click the bell right now motherflipper so what we're going to do here is create this simple counter app in the usual vue.js way by just adding data and methods to our view component and then we're going to move all of our data and methods related to that data into a vuex store into state mutations actions and getters i'll also explain what view x is and why you would use it later on in the video let's get started by creating a new view 3 project using the view cli so i'm just going to google view cli jump to the website and get started on installation and if you don't already have the view cli installed you'll need to make sure you have node installed first which you can get to at nodejs.org and you probably want to get the one on the left and once that's installed you can then install the view cli with this command and you should then be able to create a new view project so i'm going to jump to creating a project and we just need to run view create and then the name of our project so i'm going to jump to my terminal which is just running within vs code which is the editor i'm going to be using and you want to make sure you're in the folder where you keep all your projects and then just run view create and let's call it learn dash view x and you want to choose manually select features and then using the space bar i'm going to enable the router enable view x and disable linter just so we don't get loads of annoying messages then i'm just going to hit enter i'm going to choose view three for this although everything i'm teaching you here should work in view two projects as well i'm gonna choose no to history mode i'm going to choose in dedicated config files and i'll choose no to saving this as a preset okay it's finished creating our project and we just need to cd into the folder and run npm run serve so i'm just going to drag the project as created into vs code open up the terminal and just run npm run serve and that's now running so i'm just going to command and click on this link to open it in the browser i mean i'll see a basic vue.js app running in the browser let's get started by creating a basic counter app on this home page so i'm going to go to source and views and home.view i'm going to get rid of this hello world component which is adding all of this stuff so i'll get rid of that i'll get rid of this import and i'll get rid of this components object as well we can also just delete this hello world component in the components folder so i'll delete that okay so we now just have this view logo so i'm going to stick a counter under that so i'm going to create a div with a class of counter i'll just stick zero in there for now and then underneath that i'm gonna add a div with a class of buttons i'm gonna stick one button which just has a minus symbol inside it and then one button which has a plus symbol so i'll save that and i'll just add a bit of style to make these a bit bigger so i'll add a style block and we'll style each of these divs give them a bit of margin so we have a bit of space between everything so i'll just target the div element i'll just set margin bottom to 10 pixels and i'll make our counter a little bit bigger so we'll target this counter class and just set the font size to let's say 80 pixels and we'll style these buttons as well so we'll target the button element within this buttons div so dot buttons button and we'll set the font size to let's say 40 pixels save that i'm just going to make these buttons a bit wider so i'll add a width property set it to 100 pixels and let's add a bit of margin as well so i'll set the margin to zero on the y-axis and 10 pixels on the x-axis save that um this is looking pretty good now so let's make this app actually work so we're going to need a data property for this counter so let's add a data method that returns an object i'll add a property called counter set that to zero and we'll replace this zero here with double curly braces and counter so that it's using this property here so i'll save that and we still see zero okay let's create a method for increasing this counter when we click this button so i'll add a methods object we'll create a method called increase counter and all we want to do here is increase this counter by one so we can just do this.counter plus plus um we want to trigger this method when we click this plus button so i'll add a click handler to this plus button which just fires that method so increase counter save that and that's now working and now let's do the same for decrease counter so i'll just duplicate this increase counter method and rename it to decrease counter and we just want to do this dot counter minus minus and we want to trigger it when this button is clicked this minus button so we'll add a click handler here and just trigger that method decrease counter save that and this is all working now so what we want to do now is move our data and our methods so this counter property and these methods into a vuex store and we already have a ux store in our project if we go to source store then index.js we already have a ux store here and it's already hooked up to our app although there's nothing in it right now well first of all what is view x well it's a state management pattern and library which means it basically allows us to store all of our data and all of the methods related to getting that data and changing that data in one single centralized place in a viewex store and all of the components of our app have direct access to the data and the methods in this store so why do we need all of our data and all of our methods in one centralized place well in a simple app like this counter app you might not need to but in a more complicated app you're going to want to break your app up into child components um this can get complicated if your data and methods are stored in one of your view components because it means you need to do lots of passing props down from parent to child to get the data into your child components and it also means you need to trigger lots of events from child to parent to parent etc in order for your child components to trigger a method that's in one of your parent components and this gets more and more complicated the more and more complicated your app gets but with ux we don't need to worry about all this because all of the components in our app can grab data directly from the state in the store and all of the components of our app can trigger the methods that are in our store as well so ux makes it much easier for us to break our app up into manageable child components and i will demonstrate breaking the app up into child components later on but first i'll just explain the different sections in our ux store so the state is where we store the data of our app so we're going to move our counter property into this state object and all of the components of our app no matter how deeply nested they are have access to the data that's in the state mutations are methods which change the data that's in the state and the only way we can actually change data that's in the state is by triggering or committing a mutation as it's known so once our counter is in the state here we're going to add some mutations for increasing and decreasing the counter that's in the state and we can commit these mutations from anywhere within our app and one important thing to note about mutations is that we can't trigger a synchronous code inside a mutation so if we need to reach out to an api and wait for some data we can't do that inside a mutation we can only trigger synchronous code which will immediately change the data that's in the state and when we talk about triggering mutations we call it committing so we commit mutations next we have actions actions are also methods although they can't change data that's in the state although they can't access data that's in the state well if we want to change data from an action then we need to commit a mutation from within that action first however we can have a synchronous code in our actions so if we needed to reach out to an api and wait for a response before changing the data in our state then we would make that api call from our action and then once we got the result we would then commit a mutation which would then alter the data that's in the state and i'll demonstrate using apis within actions later on and when we talk about triggering actions we call it dispatching so we commit mutations and dispatch actions and we don't see it here but we also have a getters object where we can add some getters and getters allow us to get data from our state now we can just directly access the state from any of our components in our app so we don't always need a getter however with getters we can change or filter the data in some way before it's made available to all of our components so if we wanted to grab say the square of our counter and make that available everywhere in our app then we could use a getter to do that and we will add a getter later on and finally this modules object allows us to break up our store into multiple modules with each separate module having its own state mutations actions and getters and i won't be covering this in this video but let's say our app had a second page with some completely different functionality let's say a shopping list then in that case you might want to break up your ux store into one module for the counter and one module for the shopping list let's move our app's data and methods into this ux store so we'll start by moving the counter into the store so i'm going to jump back to home.view and then i'm going to copy our counter property here and in fact i'm just going to delete our data object now save that jump back to index.js and i'm just going to paste that inside this state object here so i'll save that and this counter property is now in our state and we can't see our counter on our page because if we go to home.view it's looking for a local data property called counter so we need to now instead grab the counter that's in the state in our store so i'll get rid of counter here and to access the store we can just do dollar store then to access the state we can just do dollar state and then we can just access any property that's within the state so we just want to access this counter property so we just want to do store.state.counter i'll save that and we can now see our counter again on the page except now this value is coming from this counter property in our state in our store okay so let's move our methods our decrease counter and increase counter methods into a couple of mutations in our store so i'm just going to cut these methods and get rid of the methods object here save that and i'm just going to paste them into this mutations object however we don't want to change this dot counter we want to change the counter that's in the state so state.counter and in order to access the state within a mutation we need to pass the state into the method like this and then we can just change this to state dot counter and here as well i'll save that and so these methods are now in our store but we're not currently using them so i'll jump back to home.view and jump to these buttons and our click handlers here are currently looking for some local methods which no longer exist but we now want to commit these mutations here so i'm just going to empty out these click handlers and for the plus button we want to commit the increased counter mutation so again to access the store we can do dollar store but this time we want to fire the commit method because we're going to commit a mutation and then we just want to pass in the name of the mutation as a string so the name is increase counter so we just want to do store dot commit increase counter i'll just copy this and paste it into the other button and just change this mutation name to decrease counter so i'll save that and hopefully now everything should be working again and it is so we have some state we have some mutations let's add some actions to our store and remember actions can have asynchronous code so let's use some asynchronous code in our actions so let's say when the user clicks this plus button we want to grab a random number from a remote api and then increase this counter by that randomly generated number instead of just by one now of course we could just easily generate a random number using javascript but i'm just going to use this idea just to demonstrate how you can use apis within actions so i'll create an action with a corresponding name to this mutation in the actions object here so i'll just call it the same name increase counter and for now i'll just log out increase counter and then brackets action and i'll save that and now let's dispatch this action when this plus button is clicked instead of committing this mutation so i'll jump back to home.view back to the plus button and to dispatch a action we just need to trigger the dispatch action instead of the commit action so we can just change this to dispatch and this will now dispatch our new action instead of committing this mutation so we'll just open up the console to make sure that's working click on the plus button and yeah we can see our log there so now let's use an api to grab a random number and first of all i'm just going to install axios to make it a little bit easier for us to do this so i'm just going to kill the dev process with control c and then run npm install axios and that's now installed so i'm just going to launch our dev server again with npm run serve okay that's running again so i'm just going to reload the page i'm just going to google random number api i'm going to jump to this random.org i'm going to scroll down to this link here which gives us an example of using this api i'll open that in another tab and you can see here it's generated about 10 different random numbers just going to full screen this and we're only going to need one number so i'm going to change this num parameter from 10 to just one and now that's just generating one number so i'm just going to copy this link from the browser and then we'll use axios to call this url within our increased counter action well first we need to import axios so i'm just going to add import axios from axios and then in our increased counter action i'm just going to do axios and then pass in that url that we copied i'll add a then block which should give us a response and i'll just log out the response let's just make sure that's working i'll jump back to our app click on the plus button and we can see our response and in this data property we can see a random number so if we click this again we see a different random number this time so what we want to do is send this random number as a payload from this action to this mutation and this mutation will then add this random number to the current counter so this number is going to be at response.data so once we've got this response we want to commit this mutation and in order to commit a mutation from an action we need to pass an object into this action with the commit method like this and i'll just get rid of this console log and now we can just do commit and then the name of our mutation in a string increase counter and then we can pass along a payload as well and we want to pass a load this random number which is that response dot data so i'll save that and i'll jump to this mutation and we need to receive this payload as well so i'll add a second parameter here called random number and i'll just get rid of this line for now and just log out that random number to make sure it's working so i'll save that click on the plus button and we can see the random number being logged out by our mutation so now we just want to add this random number to our counter so what we can do is state dot counter plus equals random number so we'll save that and let's see if it's working click on the plus button and yeah it's increased by six i'll click on it again now it's increased by five okay that's all working so let's do the same for the decrease button as well so i'm going to duplicate this increase counter action i'll get rid of that console log actually on this one um we'll rename this action to decrease counter and this time after we've got the response we want to commit the decreased counter mutation so i'll change this to decrease counter and we need to pass in this random number to this mutation as well and now we just want to do state dot counter minus equals random number so i'll save that and we'll see if that's working and that's not working and that's because if we go to home.view we're still committing our decrease counter mutation when we click on the decrease counter button instead of dispatching our new degrees counter action so we just need to change this here to store dot dispatch so that it dispatches the action instead and we'll save that reload that seems to be working now it's decreasing it by a random number if you found this video useful so far make sure you smash the like button and leave a comment tell me what you want for christmas let's add a getter to our store now so let's say that we want to display the square of the current counter underneath the main counter well we could use a getter to do that so first let's add some markup for displaying the square of this number so i'm going to jump to home.view and after our counter div i'm going to add another div with a class of counter squared i'm just going to output our current counter first so dollar store dot state dot counter and then i'll add a space a new line i'll add a superscript tag with the number two inside it which should look like a squared symbol then i'll add a space on equals and a space and then a new line uh for now i'm just going to put xxx but we will place our squared number here later so i'll save that and that's looking pretty decent so now let's create a getter to get the square of the current counter so i'll jump back to index.js in the store folder um a lot of getter and we'll call this get a counter squared um we want to grab something from our state and modify it here and in order to access the state we need to pass it in as a parameter here so i'll pass that in there and getters need to return something so we just want to return the square of the counter so the counter multiplied by itself so we can just return state.counter multiplied by state.counter and i'll save that and we should now have access to this getter so i'm going to jump back to home.view and we'll replace this triple x with the value from our getter so we'll have double curly braces and we just want to do dollar store and then to access our getters we do dot getters and then dot and then the name of our getter and our getter is called counter squared so i'll put counter squared here save that and i'll click on this button and yeah that seems to be working 5 squared is 25 10 squared is 100 okay so we've covered the basics of ux here state mutations actions and getters however view x gets a little bit more complicated when we start using text inputs with it and two-way binding so i just also want to cover that as well so let's add a text field to our app where we can enter a color name or a color code which will give our counter a different color so let's add the markup first i'm going to jump to home.view and then after our buttons div i'll add another div and i'll put a import in here and we'll add a placeholder attribute and just put enter color code i'm just going to split the attributes on this and save that and we can see our input here so let's add a state property to hold our color code so i'm going to jump to index.js and add another state property here called color code and let's just set it to blue initially and i'll save that and let's add a dynamic style attribute to this counter which sets it to whatever color or color code is specified here so i'm going to jump to home.view and see this div with our counter i'm going to split the attributes here by the way i'm doing that with the split html attributes extension which you can get from the vs code extensions page and we're going to bind to the style attribute here i'll add an object here and we're going to set the color property and we're going to set it to this state property here color code so we just want to set this to dollar store dot state dot color code and i'll save that and we can see our counter is now blue and if we change this value to red then it should be red and now let's bind this color code property to this input so that the user can change the color so i'll jump to home.view to this input and you might think that we could just add v dash model and set that to dollar store dot state dot color code and i'll save that and i'll just reload the page and if i change this to blue it is working it does change the color of the counter however we're not supposed to do it this way we're not supposed to two-way bind with properties which are in our state we're only supposed to change state properties using mutations and i'm pretty sure in vue.js 2 we used to get an error if we tried to do that but for some reason we don't seem to be seeing the error in ujs3 but anyway i'm going to jump back to home.view now we can still use v model here but what we need to do is set it to a computed property which contains a get method and a set method a get method for grabbing the value from the state property and a set method for committing a mutation which will then update the state property so i'm going to remove the current value of this v model and we'll set it to a computed property called color code we need to create this computer property so i'll add a computed object and we'll add this color code computer property and when we create a computed property which has a get method and a set method we don't do it like this like a method we instead do it as an object with two methods inside it so we need a get method and a set method and in the get method we just want to get the state property value color code from the state so here we can just do return this dots dollar store dot state dot color code i'll save that i'll just reload the page and that seems to be working because this input is populated with the value of our color code state property um this set method will be triggered every time the value in this text input is changed and just to demonstrate that i'm just going to log out set save that and just type something in this field and you can see it's logging out set every time we change it and what we want to do is get the current value of this input and commit a mutation in our state and send that new value as a payload so we need to pass in a variable name here you can use whatever you want i'm just going to use new value i'll just log out new value so you can see this working save that and as i change the field we can see the new value of the field being logged out every time so now we just want to send this to a mutation so let's commit a new mutation that we've not created yet so we can do this dot dollar store dot commit and we'll commit a mutation called let's say set color code and we want to pass along this new value as a payload so pass that along save that and now we need to create this mutation so i'm going to jump to index.js and create a new mutation here set color code and we need to pass in the state and we need to pass in the payload that we're sending and again i'll just call this new value and all we want to do is set this color code state property to this new value so we can just do state dot color code equals new value so i'll save that and i'll reload the page and hopefully this is working now type in blue and we see blue type in green and we see green and since we have a bunch of mutations and actions with the same names it's generally a good practice to always have a matching set of mutations and actions so let's just quickly create a set color code action pass in the commit method and we'll just commit the set color code mutation oh and we also want to pass the new value to this action so after this object we'll just pass along that payload and we want to commit the set color code mutation and pass along this new value save that and then we want to change this computed property and the set method to dispatch the action instead of committing the mutation so i'll just change this to dispatch and i'll save that make sure it's all still working yeah that's working make sure our counter is still working uh yep seems to be now that all of our data and methods are in our ux store it's going to be really easy for us to break our app up into child components without having to send data down to those child components and without having to trigger events from child to parent which is one of the most beautiful things about using view x so let's just quickly break this up up into child components so this div with our counter here i'm just gonna cut that and i'm going to create a new file in the components folder called counter.view scaffold a template i'll paste in that div i'll save that jump back to the home page and we need to import this component so a lot of components objects and we'll use the html tag counter i'll just use the require method to import this component but you can use the import method if you prefer so at slash component slash counter dot view and then we just want to place that component here so counter and i'll save that reload and everything's still working so let's do the same for this counter square div i'll cut that create a new component called counter squared dot view paste in that div save that and we'll import that so we'll call this element counter squared and we want to change the path to counter squared save that and we'll place that component here counter squared save that and we can still see our counter squared and let's do the same for these buttons so i'll cut this buttons div create a new component for that buttons dot view and paste that in there save that and import this component and we'll call it buttons change the path to buttons dot view we'll place that component here save that and we still see our buttons so let's finally just do the same thing for this div with the input so i'll cut that create a new component called color code dot view scaffold that paste in the div save that and import it we'll call this color dash code change the path to color code dot view and we'll stick that component here color code let's see if that's still working and that's not working anymore because we have this computed property which is still on the home.view component so i'm just going to cut this computed object and we'll add it to our color code instead so i'll paste that there save that and let's see if that's working uh yeah it's all working so in just a couple of minutes we've broken our app up into child components without too much messing about all thanks to the power of view x and i cover view x in more detail in some of my courses which you can get to at danny's dot link slash courses such as this beautify course where we create a beautiful responsive app using futify vue.js and vuex and this quasar framework course where we get to create cross-platform apps with vue.js and vuex and you can watch the start of these courses in these videos here and please consider clicking the subscriber thing if you've not already thanks for watching and i'll see you in the next one you

Channel: Make Apps with Danny

Views: 35,803

Rating: 4.9718113 out of 5

Keywords: vuex in 10 minutes, vuex tutorial, vuex crash course, vuex state management, vuex axios, vuex store, vuex guide, vuex help, vuex vue.js, vue.js tutorial, learn vuex, how to use vuex, learn vuex in 10 minutes, vuex getters, vuex mutations, vuex actions, vuex state, vue js, vue tutorial, vuex and api, vuex basics, vuex explained, vuex example, vuex for beginners, vuex how to, vuex how to use getters, vuex rest api, vuex vue 3

Id: nFh7-HfODYY

Length: 32min 12sec (1932 seconds)

Published: Tue Dec 15 2020