Vue Tutorial: Using Vuex with TypeScript

hello and welcome i hope everyone is doing well it's been quite a while since i made a video and this one is going to be able to view x and type script i've been trying typescript with vue for the last month i guess or a couple of weeks i've been doing it on stream and today i want to make a video about how you can use vue x with typescript because i think most people will be doing that so i just want to start so by explaining what i'm going to do and what this video will cover so that you don't waste time watching it this video basically what i did is just created a new project with typescript i don't have view x installed i'm going to install it so this video assumes that you have a view project running you know already built and you just want to add view x to it uh you know with typescript support so it does not show you how to install typescript to an existing view project it does not show you you know any any of that it's basically going to show you how to create a store with typescript and everything and re you know make it to run properly so i'm gonna start by as you can see i just created the project i'm gonna start by going to my project let me just make this a bit bigger and i'm gonna do yarn run i think it's actually it's just yarn serve so we're gonna run our app and i have i'm going to be using using phpstorm so i have the project open right here we can take a look at for example this file and i'm gonna try to go quick you know just so i don't make the video long and basically we're gonna make an example we're gonna negotiate you like talk to the store try to get some values and set some values and of course it's going to be using modules because if you are using view eggs not and you are not using modules chances that you're going to regret this decision this decision in the future are you know it's really really high so yeah we're going to be using modules all right so we have the project running on localhost 8080 let's try that and see what we're going to get so localhost 8080 alie so we're gonna get this and uh okay uh you need to uninstall vx so we're gonna just do yarn add vx really really really simple so i think um yeah it is done awesome five seconds so the first thing we would like to do is well this is what i have done in all my previous videos when using view and view x i like to create a new so we're going to create the entry point to our store i would like to create that inside a store folder and i'm going to call this index.ts because it's not js it's typescript so we're going to use ts for typescript and the first thing we would like to do is we would like to import view from view and we need to import view x from view x so we're gonna do view x like that and then we're gonna do view dot use view x okay so far so good now uh what we used to do is we used to do something like that so we used to do star and we just give it the state so we have the state right here we have the modules you know this is what what we regularly do in interview x store without you know without typescript and finally we do export default everything is highlighted because this is not typescript i'm just trying to show you how we used to do it and how we're going to do it now so we do view x dot store with a capital s and yeah we just used to give it the star now since we are using typescript what you have to do is you have to type the store so we're going to give it a type of store options which is coming from view x now i'm using phpstorm which is going to be plenty of help it's going to import everything that i need for me so i'm going to like click return key and it's going to import the proper thing for me and you can see the store options if you go to the definition you can see that basically it takes the states the getters actions mutations modules and everything so it's like really really basic thing and you're going to notice that right here this thing that looks like if you are familiar with high programming in high-level programming languages this thing that looks like a gener generics it's basically asking for the state and the state in this case is the root state of our application because this is the store like the main file that we use and what i like to do in this case and by the way everything that i'm doing right here is inspired from uh from uh you can find the link in the description for where i found this really helpful uh stuff on how to use ux and typescript so what i'd like to do is i like to create a types.js file and inside here i just export an interface so we're going to export an interface we're going to call this root state like that and we can give it whatever so we can like just do hello message and it's going to be of type string all right so that is all we're going to do now when i go back instead of giving it any i can give it the root state notice again it's it's me in the ass so let me just try one more time when i hit return it's going to import this from types for me all right so you can see the root state now notice that it's going to put some curly brace right around it because i'm not exporting the default i'm just exporting this root state so if you don't want to use that do export default all right now we have the root state uh this is not the proper syntax we have to do equals like that and you're gonna see that it's going to complain about stuff right here basically because you have to whatever you have in your uh in your types you know the hello message you have to initiate right here you have to initialize that so if you just type h you're gonna see right away auto completion i'm gonna get a low message and then maybe i can do like hello from ice media all right something like that so basically we have a start and everything now we need to extract that extract export the proper thing and we need to do a star like that and we need to give it the root state once more so like that and then pass it the store object and we're going to leave the modules empty for now until we create an object so for now we have we have just created our store let's let's go to our main.ts file and let's import onstar import our store and make use of it so we're going to do star hopefully it's going to find it nope and let's just uh let me see so if i do star slash index i don't think i need the index but yeah i'm just going to keep it to make it really simple so maybe we can do star store like that or since we are using es6 i can get rid of this and i can just do star because it's the same as the one it has the same name okay great now so far what we have is let me see if we have any errors uh we don't have any errors now what would be great is if we can display the hello message from our state our our store instead of this so let's go to our app.view component i'm going to create a computed property because i want to use a get and let's call this hell what hello message the name could be whatever i'm gonna give it the getter and in inhale in here i'm gonna do return this star dot state dot and says this is the root state you don't have to go i just need to do dot state dot hello message and if i go maybe you can give it like the return type since you know we are using typescript maybe we can tell it that's going to return a string and right here since this is a variable i'm going to add the column and i'm going to give it the hello message let's see so you can see it is working i'm going to refresh just to get rid of the error and you can see we have hello from ice media which is uh great so yay we have a store with typescript and it is working now let's let's create a new module let's assume we have a user module now for modules what i would like to do is i would like to create a new folder with the name of the module in this case it's going to be user hopefully that is not really small and inside that we're going to do basically the same thing so we're going to create an index file and this index file is going to have one main functionality it's going to so the way we're going to do this is we're going to have the getters in a separate folder sorry in a separate file and the mutations and actions you know getters separate file mutation separate file action separate file and you know the type the state is gonna be in a separate file so the index basically is just going to bring everything together and let's start by giving it like the skeleton the thing that we're going to need the mo first so let's just do export const let's give it the name of the module so it's going to be user in this case and the type of this is module so module is coming from view x so i'm going to click on that and you're going to notice that it's going to import that for me thank you php star and if i go to the definition of module you can see that it requires the state the state of my module and then it requires the root state so it's really easy for the root state we're just gonna do root state and it's gonna get that from the types which is this one you know where we have the hello message and the other one you know the state of my module that's something i need to create and to follow the same you know the same [Music] thing that i did before i'm gonna inside my module user folder i'm going to create a new file called types dot yes and this one is just going to export an interface and we're going to call it user state and maybe we're going to give it like a username which is going to be a string an email as well as a string as well let's add one let's call this last login and it's going to be of type date you know just to change things a bit now i can just go right here and i can do user state and again it's going to import that for me and now i can do i can give it the state and the states we could do that like in a separate object we can do like export cost uh state we don't need actually to export that we can just do const state and this one is going to be of type state user state sorry user state and you're gonna see it's gonna complain about stuff because we need to uh you know we need to initialize the following properties the username the email and the last login so if i just type you i'm gonna get the username i'm gonna just give it conscience whatever the email again you know auto completion uh let's just do some email that is my real email if anyone want to get uh get in touch and let's log in maybe we can do new dates so you know because i just logged in and this one is being used like right here so this is the same as doing that so because we are using the same name and now we have a state we can try to access this state right now uh actually let's go ahead and do it so the first thing we're gonna go we're gonna have to do is we're gonna have to go to our index.ts and we need to import the new module because we need to tell our store that we have a new module it's called user and it's going to import that for me and right here i'm just going to do user like that all right so let's uh change this with the for example the username i'm going to go to app.view and i'm just gonna try to do state dot since i have a module called user i have to access that through through the the module name which is user dot uh what did we call it uh username it doesn't make a lot of sense because it says hello message but i just want to show you that it's working all right so you can see the username we can do the email as well if we want to we have the email and yeah so let me just put back the hello message because it makes sense all right so we have a new module now what would be great if we can have some getters and mutations and actions i don't know about actions but yeah let's create the getters first so i'm gonna go and create a new file i'm gonna call it getters.ts and i'm gonna export uh not default but i'm gonna export const getters and this one is going to be of type getter tree which is coming from view x obviously it's asking for two things if i go to the getter tree definition it's asking for the state of my module and the root state again phpstorm is going to import that for me i'm gonna do user state it's gonna import that and i'm going to do root state and i'm ready to go now all i have to do right here is i have to give it the name of my stuff let's let's say for example we have one called get user info this one is going to just get the user info in a in a string so it's going to return a string that that's something we know maybe we can add the type right here it's complaining because we need to do a return you know we have to do return string okay so what we're going to do is of course this is just like you know regular viewix getter it's going to take the state and we can do let's use the template stuff let's do username something like that and stay dot username and email okay let's make that look nice like that state.email and you can see we already get the auto completion it knows that we are talking about the user state when we call the state all right that is great maybe we can call this from from the app.view component just to see if it is working but first we need to go to our user slash index.ts like the the entry port to our module and we need to select that we have a getters that we need to to be using so we're going to do import getters and you can see it already knows that i'm uh you know the location of my getters file so i'm just gonna go down and i'm gonna give it the getters like that again i don't have to you to do get as gears because es6 and if i go to my app.view maybe now instead of hello message i can do user info yeah let's give it a get it's going to return a string that's something i know and i can do return this dot start you don't have to use this dot star like i'm doing you can use the view x like map getters and everything i'm just trying to make it like really you know it depends on what you want to do the main focus of this video is to show you how to you know how to structure this stuff you know how to to make everything work together and yeah so we're going to do this start getters dot get user info and let's go to the top let's instead of that do get not to get but it's called user info like that and you can already see that we have the username conscience kind of whatever and the email is this so yeah we have a getter and it's working just fine let's try to add a mutation so let's say that all right this is going to be a really bad example but let's say on mounted uh we're going to do a set timeout so basically the idea is you know just to make this work is that i want after three seconds when my app loads after three seconds i want my you know my username to change to something else all right and we're gonna use set timeout and we're gonna do this dot user uh not username but user info or actually it's really misleading let me change some uh some stuff let's do username and let's just get the let's call and create a new getter let's to get username you know so it does not seem really confusing and it's just going to return state dot username all right so now if i go to getters i can do get username like that and what the f [Music] i get username get username return username uh it's not identify what getuser oh i need to change this to username sorry all right so let me get rid of that error so we have the username right here and what i would like to do is i would like after three seconds for the username to change to something like changed hey yeah so you're gonna you're gonna notice that i'm gonna get an error because for now what we did is we we implemented the getter for our property but we didn't assign it a setter so basically to fix this we can do something like that like value and uh okay since we are using typescript i know this is going to be a string because i just assigned it a string right here so i can type this value and i know it's not going to return anything so i can just uh probably add void all right so for now let's just do console.log value so if i refresh you're going to notice after three seconds i'm going to get the the value right here so change hey whatever cringey stuff so now since we have a setter maybe we can commit and actually change that so that is going to bring us to the next thing which is mutations let's create a new file called mutations.ts like usual and this one we're going to export const let's call it mutations because it makes sense to call it mutations the type is going to be mutation tree once again you're going to notice it if i go to the definition you can see it's asking for the state we don't need the root state at this point because it's just for the modules so we can do user state like that phpstorm is importing everything that i need and i could i can go down and i can do like for example set user name i'm sorry if you don't like this thing but i like using even for getters i like using everything in uppercase so yep uh yeah so set user name this one takes the state and it takes the payload the payload in this so we don't have to really give the state to like a type because it's coming from the user state it knows it's this one we can actually make sure that it's doing that because once i do dots you can see it gives me the username the email the last login the payload is a string and we can give it a string just to make sure because i know in my app.view i am sending it a string all right so i'm going to fix that in a second you know i'm going to implement the setter in a second so for this one we're going to do is we're going to do set dot username we're going to make sure that that is equal to the payload we're going to set the payload as the username all right so far so good now if we want to use these mutations we have to go to the index of our of our module we're going to do import mutations you can see from the user mutations file we're going to go back to the bottom and we're gonna give it the mutations now we have that registered we can go right here and we can just like we use two we're gonna do this.commit that's how we call mutations and we're gonna give it the name of the mutation it's called set username and we're gonna pass it the value so now if i go back to my app what the uh all right let me refresh i didn't i don't like what happened all right so there we go you can see that it changed from question hacks to changed it's not question hacks by the way just one of my friends says that all right so far so good one other thing that i would like to mention at this point is i i don't really like this set username and this hardcoded value right here one thing that that you can do is uh is you can create an enum so you can like export enum and you can create some you can call it whatever i'm going to call it user mutations because i know this is coming from the mutations so mutations like that and you can give it like so for set username we're going to set it to set username it's going to be the same as the one that we use right here and now instead of giving it like you know to use this value what we can do we can give it like this array syntax we can do uh user mutations dot set user name all right so something like that so basically we just replace the hard coded value with this thing right here now whatever we have right here in the in the string is going to work here if we do the oh if we do something like it's going to be replaced right here by that now we can go back to our commit and instead of doing that we can call the user mutations dot set username and let me just add the import statement let me just make sure it is added it is so if i go back you can see if i refresh nothing is going to change you can see changed hey this is nice because we don't have to deal with like hard-coded value because if you want to change this to something meaningful you can just do that it's still going to work i mean whatever you put right there it's going to work all right okay so that's uh yeah that's it for mutations and i think that's pretty much it uh yeah actually one more thing uh it's not really important and i don't know if we can like do it but we can let's create actions so we can do actions.ts and let's do export cons let's call this one actions and again it's going to be action tree type it's asking for two things uh you're probably familiar with this now it's asking for the state of my module and the root state so let's give it that and you could we can do whatever right here so you can basically do the same thing as uh as this you can create an enum and everything i'm just gonna try to go fast and let's call this load the api results or something i don't know and yeah so this one let's let's give it the type any even though that is not something you want to do in typescript and yeah let's just use fetch uh json and another then data i don't know what we're gonna do let's just return data for now so basically we need to give it something uh there's an api that i found earlier it's uh let's just do public apis it's about catfax or something e yes this is the one i'm gonna take this one and you can see we have we only have two urls we have slash facts and slash users i'm just going to do slash facts just to get some some result so let's paste that let's do facts and let's call this from yeah let's call this from our component and it's actually we need to return something because we are doing any let's return this you know this this promise that we have right here so let's go back to app.view in our mounted and let's do this dot star dot dispatch and let's give it the name what is called load api result it should actually be get yeah it doesn't matter so we're just gonna do that and let's refresh go back to the page and see oh uh yeah i forgot the most important thing which is to go to our module and tell it that we have an actions file so let's do import actions from why is it not auto completing that actions there you go actions and now if i go back uh yeah i don't know what happened so we have something we have something from facts we have uh we have some results uh i let's just add like a log uh like console log to see what we have so where's the actions right here so let's do log data just to see what we have in the data so going back to the console you can see we have some data and yeah so now you can like if we have some place so i don't know if you remember but in regular view ex we have the context which we are going to distract to get the commit out of it so maybe you can do something like commit uh if we have like uh you know uh let's do set cats facts maybe and give it data and yeah it's just like regular thing you know instead of using this you can use the enum that we just showed and yeah everything would be great and i think that's pretty much it now you can use something like uh the return type instead of using this you can like use a promise now promising is really generic it's not gonna let you just use promise can i tell you you know give me an argument that type maybe you can do something like uh array and the type no array is uh you know is very it's generic but itself so we can do something like objects so an array of objects maybe something like that yeah yeah i don't know but yeah let's see what this one returns i don't know all right that's uh yeah that's all i wanted to show you i hope this was helpful in a way if you have any questions please leave them down in the comments below or you can just like straight up shoot me an email and uh yeah sorry if i went quite fast i will see you guys in the next one peace

Channel: OverSeas Media

Views: 14,199

Keywords: tutorial, symfony, laravel, framework, internet, computer, developer, coder, programer, programming, web development

Id: wRK1EZpicD0

Length: 27min 53sec (1673 seconds)

Published: Sun Jan 10 2021