Vuex - Modules

hi i'm greg in this lesson we're going to be talking about ux modules specifically how we can organize our vue x code using ux modules and then we'll look at how to name space our modules to keep things even more encapsulated let's reorganize our code using modules and we'll start by looking at why we might need them up until now all our view x code has been going inside store.js all of our state mutations actions and getters all in one file and as our application grows this will obviously get messier we can solve this problem by splitting out our code into separate modules we'll have a user module and event module they can each have their own state mutations actions and getters we'll place them inside a modules directory and we'll tell our store.js file where to find them you can create modules for data models like we have here for user and event we can also create modules for features including any functionality which uses shared state or data a good example here is we could have a single module for doing user authentication and encapsulate all authentication code in a single module our first step for using modules is to create a store directory we'll create a new folder inside of our source directory called store then we'll drag our store.js inside this directory we then need to tell our main.js file where to find the store inside a store directory if we take a look inside our browser we can see that everything is working just fine in a minute we're going to be putting our user state inside of a module but first let's use the state inside event list here in map state i'll include user and now in the title i'm going to say events for user dot name printing out that state if i look in the browser sure enough it says events for atom jar now let's create our user view x module we'll start by cutting the user's state from the store.js and now we'll create a new folder for our modules called modules inside of that directory we'll create a new file we'll call it user.js we're going to always be using this icon when we're talking about ux modules inside of this file i will paste in the user's state i'm also going to delete adam's last name just so the title appears on one line notice i'm exporting the state as a constant here next i need to import this ux module into my storage as i'll say import star as user from store slash module slash user what the star is doing is importing all public items into the user namespace so if i looked at the value of user.state it would equal the value of the constant that i exported now i need to tell vuex to use this module like this [Music] now inside of event list i need to change how i'm printing out the name by adding an extra.user see this first value is the module name and the second is the state inside the module now if i look into the browser i can see events for atom everything's working before we create a module for events there's one more thing i need to change inside of event create we access the user state i just need to add a dot user to that to reference the module name now let's move our event view x code into a viewex module first we'll create a new file inside of our modules directory called event.js inside our store.js first we're going to cut out event service and move it to our new event module because it's our event actions that call it then inside our storejs we're going to copy all of the code because it's all for the event except for the categories at the top we'll delete everything but those categories inside event.js we'll paste that in and we need to make some modifications to the code we'll call export const state to expose the state constant we'll delete categories from our state we'll export the mutations constant we'll export the actions constant and lastly we'll export the getter's constant next we need to import this module into our storejs i'll copy and paste our import line and add that to our list of ux modules now if we look in the browser it's not quite working yet we need to make some changes to our components i'm going to jump into our event list and if i scroll to the bottom of this file [Music] i can see that i need to change the map state when i call store.state.event event is referring to the module name and inside of that is the events and events total state so i need to change map state to reference the module name then to access events total i need to type dot event then at the top of event list dot view when i access the array of events i need to change that to event dot events and inside the browser i can now see the list working now inside event show i need to make some changes here too look at all the different places we're using event luckily i don't have to change them all to event.event there's another way to make it work i'm going to change map state from using an array to using an object and then specify that i want event to be mapped to state.event dot event that's all i need to do and if i jump in the browser i can see that show event is working fine i've been showing you one module syntax for view x but there's two you'll see often in the wild the first one which we've been using uses constants so inside our modules we have state mutations actions and getters then inside of our store.js we use import star the benefit of this syntax is that it makes it easier to create private variables and methods the other syntax you'll often see is just exporting a single object with our state mutations actions and getters and then here's how we import that both syntaxes are fine it's just a matter of preference it's common to access one module state from another module but how do we do that here you can see our create event action what if we wanted to access the user module state from inside this action so we're inside the event module and inside that action we want to access the user module state given the syntax we already know we might try to solve it by sending in the state from the context object and then accessing the state by doing state.user.user.name however that's not going to work when we're in modules the state context object only gives us access to the state inside of our module the local state instead we need to send in the root state that gives us access to the base state inside our store.js then we can call rootstate.user.user.name this rootstate comes from our store.js and from there we can access the user module fetch the user state and then get access to the name remember how we left the categories in our store.js if we needed access to those we would find them on the root state it's also common to call another module's actions from inside your action how might we do that specifically how do we dispatch the user modules actions from inside an event action we can do that a lot like we would inside of a component we'll add dispatch from the context object and then we'll dispatch the action we want to call this works fine and that's because our actions are on the global namespace see actions mutation and getters are always registered under the global namespace also known as the root which is dollar sign store even when using modules what this means is no matter where they're declared they're called without their module name so you'll notice when i'm dispatching some action or i'm accessing a getter i'm not mentioning the module name i don't have to the reason why view x is implemented like this is because i might want to have multiple actions or mutations using the same name an example here might be a logger module if i wanted to log out every time a user makes a purchase so i could create a purchase action inside my logger module so that when a purchase gets called it calls the real purchase action and it also calls the logger purchase action the drawback of this as you might imagine is i can end up with naming collisions this is why with ux you can do module name spacing let's implement this in our example app i'm going to jump into our event module and i'll set namespace to equal to true this ensures that all mutations actions and getters will now be namespaced under event now we need to change our actions to use this namespace inside event create we'll add event slash to create event action inside event list we'll add event slash to our fetch events action and inside event show we'll add event slash to our fetch event action now inside our browser we can see that inside of our list and inside our show everything is working but now we're namespaced i want to show you how we can use the map actions helper so what i can do here is inside created i can call the fetch event function now i need to use the map actions helper to make that possible so inside methods i'll set map actions to fetch event now that's what i would do if i wasn't namespaced because i'm namespaced i need to use event slash and there's another syntax i can use here i can send event as the first parameter and then send in an array the first argument's namespace the second are the actions to map this way i can have a bunch in that array on line 33 here i can still call this.fetch event if i take a look in the browser and go to a show page everything's working fine i also want to show you how to access namespace getters without namespacing to access a getter here is what i would do we covered this in a previous lesson using the map getters helper i can use this syntax and it gives me the same functionality with a namespace module here's how i would call a getter and with map getters i would use this syntax remember this code from earlier the create event action well does any of this change with namespace modules let's take a look does the way we access the state change no nothing changes here it still works fine what about when we call an action well this doesn't change as long as the action is inside this module what about calling mutations again this doesn't change as long as the mutation is inside this module and frankly mutation should not be called from other view x modules this is a best practice mutation should only be called from actions inside the current module so i'm not going to show you how to call another module's mutations you shouldn't be doing that but what if the action is inside another namespace module how would i call it i would call module name slash action to call the second parameter would be null that's the payload if the payload had a value we would send it in there if we don't we simply send a null and then we send in root true that tells dispatch to look for this action at the root of our store so basically inside create event it's going up to the root of our store looking inside module name which then has the action named action to call i know that was a lot is your brain full in this lesson we learned about organizing our view x code into modules and then how to name space our modules to keep things more isolated and scale our vuex code thanks for watching like we have here with user and event are you done hammering oh here's the parents hi see this first value is the module name and the second is a hammer stop hammering i think i need an ambulance for the guys next door if they don't cut it out we'll access dispatch from

Channel: Application Development

Views: 1,269

Keywords:

Id: e0chAM5rxRc

Length: 15min 19sec (919 seconds)

Published: Sat Jul 17 2021