Vue.js Vuex Modules Don't Have To Be Boring...

hey developers so today we are doing a quick primer on vue x modules now view x modules are ways that we can break our vue x store which is our state management system for vue.js into almost smaller type features that can be more easily used throughout our app so what typically happens is when you add vuex into your application as your application grows your view x store grows and at some point of time it becomes a little unmanageable because it's so huge and you have just this one huge file but there's actually ways to break this up and break them into modules which i'll explain how that works and it's kind of a really cool feature that you can use as your vue.js applications grow now this is just going to be a primer on it there is many things to to vuex modules so i'll go over some of the key points to it to help illustrate this tutorial today i'm going to be using this hello world program i actually set this hello world program out in my last video if you guys are interested in the description below you can see that you can go ahead and click on that video and watch it you don't have to watch it to take to learn from this video but certainly take a look at it if you like also if you guys like these type of videos make sure you click that like button and smash the subscribe button i really appreciate it and leave a comment below and one more quick plug i do have a full view course that i am creating right now i put a link in the description that you can go and sign up for it and i'll let you know as soon as it's out it's actually a very comprehensive full course with one and one time with me all right so let's begin here so this is the app that we created uh from a previous video but it's really simple all it is it's a counter you press a button and increments the counter the way we set this up is that this is the home view this is the one in single and only route that we have in here we have we're using some view x helper functions map getters map mutations so this essentially maps the set counter to increment so every time you do this click event increment gets triggered which updates the counter and then we have this counter here and then i created this mutations file just to have some nice uh defaults here we can use everywhere the set counter and git counter and then in the store itself all we do is we have a meditation and we have a getter now typically uh one thing i didn't mention in my last previous video but it's worth mentioning is that uh the a best practice another best practice in the view x world is you never directly mutate things using mutations you always dispatch actions now actions are typically used for asynchronous functions but really a good practice is to use actions everywhere and then have your actions commit to your mutations and i'll show you how that works so we're going to make a quick change to this it's going to be really quick instead of having uh we're going to still have a mutation called set counter but button have an action called set counter as well it's okay we have the same names because they're two different things but in this case we're actually going to need to commit so you're going to use the commit here and then i'm going to commit this set counter and so that way and we'll make sure we don't have any errors nope none so far and now in our home view instead of doing map mutations we're gonna do map actions i'm sorry for my clicky keyboard okay so we're gonna do map actions here and let's we'll refresh it and it's still working the same way so we just decided anytime we're going to make changes we're always going to dispatch an action instead of a mutation it's just kind of like a little bit of a better practice all right so we haven't actually looked at any modules at all yet so let's say we wanted to refactor this into its own module so we have this empty modules object here and it wants to be it wants to have something inside of it so that that's pretty easy the the what we want to do is i'm going to create a new store here and i'm going to call it modules well a new folder inside the store and the new first file i'm going to create is called counter js and i'm going to copy and paste this from another screen just to make this a little quicker but then i'll describe what it's doing here so what we're going to do for you guys is there's really three different ways you can go ahead and create a store module here's the first way and i like to call it the individual const values so in this file i have export count state my mutations here's the actions for set counter and getters so this looks exactly like this except i broke it out into its own file and into its own individual parts you can even go as far if you wanted to do something crazy like put each one of each one of your states for different modules into its own file you may want to do that in some circumstances but i think it would get confusing so here's the first way we want to do it so we just broke that up into its own individual const values which are their own objects which have you know all our actions getters and mutations in there and then the way we want to import this in is first i'm going to comment this out and we'll do an import star as and we'll call it counter from and then we can grab it from modules slash counter is this way and then we just inside this modules here i'm going to leave this counter here i'm just delete this for now you no longer need it and if we did everything right it should still work i'm refreshing it yep it still works as you expect it cool so now we have created the individual const values so let me show you another way i've seen it i think i've seen more people do it this way than any other way but the second way i like to call it is the export default it's just based on your preferences maybe you like this way better i'm going to copy and paste this and i'm going to highlight it cool so this is you're creating one object and you're doing an export default on it and inside that object you have your states your mutations your actions and getters so it's basically the same thing it's just going to be a different way to import it in and this is also something you might see so by the way you get an error that doesn't understand what you're doing so you have to import it in as counter from and then the same thing the modules slash counter you save it and once again i'm working as expected so that's the second way now the third way is the way i kind of like to do it um once again personal preference here so this i like to call the const all export const all and this is the same way but instead of doing the default export default we actually give it a named export so in this case we're calling it counter and then once again we still have the states at mutations actions and getters in here and then it's just a little bit different way to import it instead of importing in because this when you import defaults you actually don't have to specify it but i can just go counter here i'm putting the curly brackets around it and then it works the same you can even create an alias here if you wanted to as counter one two three and then put one two three here but you know we don't really care about that we're gonna leave it counter so you could create aliases and all that i'll make sure i fix it so those are the three different ways of of doing like module exports and so now we essentially have a module but let's say we wanted to create a second module so we're going to create a new file here we're going to call it counter 2.js and we're going to be kind of lazy i'm just going to copy and paste this over here and i'm going to grab my set counters and we're going to call this counter 2 and we're going to call this counter 2 and we want to upgrade update counter 2 and return in counter 2. so now we have our counter two and now we can import this in and it's gonna be basically the same way except this is called counter two this is called counter two and we're gonna call this counter two so let's say we do this now right away you see a little error at the bottom duplicate getter key get counter that's interesting it didn't care that we had the same key names for set counter but it gave us an error that git counter is duplicated okay well we can fix that easily so if we go in our mutation types we can create a second counter we're going to call this get counter 2 call it get counter and by the way i'm going pretty quick here if you are completely lost make sure you stop the video right here go back a few minutes and just kind of walk through it step by step so you don't get confused here i'm going pretty fast but for the people that are following with me congratulations leave a comment below and let me know you followed along this to this point so now i have a counter two so i can rename my counter to file to use the counter to name which i need to import in and look i got no errors so now what's going to happen so if i look at this home view i'm incrementing set counter here um this action set counter but both the counter 2 and counter 1 both have the set counter as the name of the action don't worry it's name the mutation too i named them the same it doesn't matter but look the it has the set counter so you know stop pause the video now and try to think what's gonna happen if i click this press me okay welcome back i hope you thought a few seconds of what's going to happen when you click this press me but let's let's try it out look it's doubling it isn't that interesting so what it's doing it's essentially running it twice so if i go to this view counter here and i look at the view x which i believe i have running view x and i'll refresh it i can see what happens when i hit press here so i see set counters being run twice and both object and let's see can you see my big fed's in the way let's see here so you can see here when i press the button it's both the counter for the counter object and counter two are both incrementing by two so it's kind of a weird thing like they're both incrementing by two and that's because we're basically dispatching both of those at the same time and one's dispatching the other so it's kind of a weird occurrence and something we don't typically want to do there might be times you want one dispatch you might want to have one action name the same in all your modules maybe you have something called like initialize and you want it to initialize everywhere so you just dispatch it with that same name and every module has it ran that might be a circumstance you want this to happen but typically this is usually thought of as a bug because that doesn't make sense but we can easily fix this because there is something called namespaces so let's see if we can fix this and by the way i'm going to update this to this home i want to have this counter 2 showing up too i'm going to do counter 2 here and then in my map getters i'm going to put counter 2 equals get counter two which i'm going to have to add in here get counter two so now you can see here they're both being incremented at the same time we don't have to look at the view x chrome extension to see what it's happening so let's try to add some name spaces to make this more sen to make more sense so i'm going to put name space to make sure i put a d at the end i've done that before and put name space and it never works and put true here and then the same thing here but name spaced true and now we're going to get a bunch of errors because it doesn't like it's trying to get get counter and get counter 2 and they no longer exist because now we have things that are namespaced and so what that means is when we import it in this is the namespace we named we call this counter we call this counter 2. now i could at this point if i wanted to have this capitalize i could do as counter let's do that as counter 2 and then i don't know i can capitalize this i'll show you why this makes sense in a second now we can go into our home view and we have this set counter and git counter but really we need to change this so this set counter i'm going to create it um i'm going to go and change this here if i can type it right this is going to be our set counter we're doing some string interpolation here and now we can pass in something called counter slash set counter so what this is saying is every time you hit increment it's going to do the counter action this is the counter module this name space module called counter and that's going to call set counter and then we can do the same thing here so now we don't have anything listed so it says unknown counter counter get counter so that should be counter 2. that's what it's supposed to be there we go now we refresh it we have no errors now if you hit press me it's actually incrementing the counter as it's supposed to and it's not doubling the counter but if we wanted to do counter two we could add in i don't know we could add in another one in here called increment two and press me counter two and inside here we just need to add the other action the other action which we call increment two and we know this is counter two now we have a counter two button a counter one button and they all work the same now you can see how this counter here i could actually if i wanted to i can put this inside its own mutations now i call this mutation types but really this maybe i should rename this to like all types but whatever so we can call it like const counter module one counter one module counter one m and we can do counter slash here and then we can have counter two and that would be counter two and now i can import those in here so go back to home i can put in a counter counter 2m counter let's see did i call it counter 1m is that what i called it my mutations type counter 1 m2 yeah actually just to be pedantic i'll just call this counter m cool and it's still working as expected and now we have it a little bit cleaner in these variables here we can also like combine them in this mutation type if we wanted to but this is fine now the last thing i wanted to show you guys is a way since we have two name space modules how to contact one main name space module to the other namespace module so that could be something well if we want counter one to increment both counter one and two all right and so the way to do that is i'm gonna make this an object here or basically a method and we still want to do the commit but now we want to access the other module so here's the first counter module we want to access counter 2 module and we also uh we can also get the root there's something called root getter root uh there's also something called root state if we wanted to grab like the root state of the other place but usually you don't wanna like change state manually we could also grab some getters but for this example we're going to do a commit and this time we're going to grab let's go ahead and grab the name of the second module which we know is we just called it counter counter to m and we know that we want to do set counter uh yep that's actually that's all we need here counter m counter 2m and so to set this commit we're going to put in actually for this one yep counter to underscore m and then we're going to put in our set counter but we're not done yet we actually have to put in the payload which would be null and then we have to put in another object and call it root and this root has to be true and that basically tells it that we're going to do this commit but we're going to do it in the root module and we're going to use it this namespace that we just created so if we did this correctly it should work let's see cool so now it's updating both of them the second counter upgrades updates second first counter updates the first awesome so that's essentially it there's a few other things like we can do we can do commits and dispatches from different modules i could dispatch something else from the other module i suppose we could do something like this instead of committing it here we could dispatch it and then we can do this dispatch so that way we're not committing to another module and it should work the same way let's see cool so yeah it's still working the same way no errors so now we're dispatching to the second counter as an action instead of trying to commit to it and then i think you can even if you wanted to you can do roots root state if you needed that and you can also do getters there's a whole lot of things but i think this is a lot to sink in so let me know what you guys think leave a comment below i appreciate it take care [Music] you

Channel: Program With Erik

Views: 11,397

Keywords: Vue.js Tutorial, Vuex Modules, Vue.js, Vue Modules, Vue.js getters, vuex getters, Vuex actions, Vuex mutations, Vuex modules how to, HOw to use vuex modules, How to setup Vuex modules, Vuex modules 2020, Vuex 3 modules, Vuex 2 modules, vuex modules best practices, vuex modules namespace, vuex modules axios, vuex modules typescript, Program With Erik, Progam With Eric, Erik Hanchett, vue.js tutorial for beginners, Web Development

Id: OL1jNfln5OE

Length: 19min 39sec (1179 seconds)

Published: Mon Aug 17 2020