Coding

GETTERS | VueJS & Vuex | Learning the Basics

  • 00:00:01 welcome to another video on VHS and
  • 00:00:04 specifically on view X this video is
  • 00:00:07 part of a series and in the first video
  • 00:00:09 off the series I already had a little
  • 00:00:12 starting project to which you can find a
  • 00:00:14 link in the video description where we
  • 00:00:16 already added view X and a central store
  • 00:00:19 and state here decode to the finished
  • 00:00:22 project off that first view as mentioned
  • 00:00:25 can be found in the video description in
  • 00:00:27 this video here we're going to refine
  • 00:00:30 this a little bit and have some best
  • 00:00:31 practices
  • 00:00:32 starting with gathers now what is that
  • 00:00:35 and how do we use it we'll see it in a
  • 00:00:37 few seconds so what are getters and why
  • 00:00:41 would we need them right now if you have
  • 00:00:44 a look at the two components I'm using
  • 00:00:46 the project registration but we can
  • 00:00:48 register a user and registrations where
  • 00:00:50 we can see all registrations
  • 00:00:52 we're always fetching the registrations
  • 00:00:55 or the user array here in a computer
  • 00:00:58 method and a computed property I should
  • 00:01:00 say and there is nothing wrong with that
  • 00:01:02 but we can do better we can outsource
  • 00:01:07 this logic into our store so that this
  • 00:01:11 code gets even shorter that we don't
  • 00:01:13 have to falter here in the registration
  • 00:01:15 dot view file for example why would that
  • 00:01:17 be beneficial imagine an application
  • 00:01:20 where we had an avro component which
  • 00:01:23 also needs a list of all registered or
  • 00:01:25 unregistered users then we would simply
  • 00:01:28 have to duplicate this code and
  • 00:01:30 duplicating code is never a good idea
  • 00:01:32 instead outsourcing this filter into the
  • 00:01:36 store and then simply somehow getting
  • 00:01:38 the list of filtered users would be much
  • 00:01:40 better and this is what I gather can do
  • 00:01:42 for us so how do we define getters then
  • 00:01:45 in your store file where we have to
  • 00:01:47 state we simply add a new property and
  • 00:01:50 surprisingly it's called Gators now
  • 00:01:53 Gators is an object a JavaScript object
  • 00:01:56 and there we simply define any name this
  • 00:02:01 is totally up to you now let's name it
  • 00:02:03 regice excuse me unregistered users this
  • 00:02:08 is a fitting name since I want to get
  • 00:02:10 back all unregistered users this simply
  • 00:02:14 is a method and here like in a computed
  • 00:02:18 property I pass the code or I execute
  • 00:02:21 the code which defines what unregistered
  • 00:02:24 users are enriched in the end gives me
  • 00:02:26 back a list of unregistered users and
  • 00:02:28 this is important a getter always needs
  • 00:02:30 to return something and this is kind of
  • 00:02:33 obvious if you have a look at the name
  • 00:02:34 again it gets something and here I want
  • 00:02:37 to return the state the convenient thing
  • 00:02:40 is view X which is a package we
  • 00:02:42 installed passes the state to each get
  • 00:02:46 to each gather define in my getters
  • 00:02:47 object here so I can receive the state
  • 00:02:50 here as an argument again this is passed
  • 00:02:52 automatically by view X and then if I
  • 00:02:54 can then simply say return state users
  • 00:02:58 and now I'm just going to copy my filter
  • 00:03:02 code here from my computer property
  • 00:03:06 let's add it here so now this is
  • 00:03:09 returning a list of unregistered users
  • 00:03:12 now how do I use to gather in my
  • 00:03:16 component then here I can simply define
  • 00:03:21 a computed property as I already do and
  • 00:03:23 I need to use a computer property for
  • 00:03:25 this and there I still access my store
  • 00:03:28 but now not the state directly but
  • 00:03:31 instead the gathers and here the
  • 00:03:34 unregistered users this is the name I
  • 00:03:36 gave this getter not like a method just
  • 00:03:40 like a property now if we save this we
  • 00:03:43 should see that the application still
  • 00:03:45 works we have to list and I can still do
  • 00:03:48 the same as before but we took the logic
  • 00:03:52 for filtering for getting this list and
  • 00:03:55 removed it from this component and
  • 00:03:58 instead put it into the store the place
  • 00:04:00 where it should be so this is already an
  • 00:04:02 improvement now we can do the same for
  • 00:04:05 registrations here I actually have to
  • 00:04:07 computed properties so I can set up my
  • 00:04:11 store gathers here too so besides the
  • 00:04:15 unregistered users I'm also interested
  • 00:04:17 in all registrations here I also get the
  • 00:04:20 state as I do in all getters and I
  • 00:04:23 simply return state registrations so no
  • 00:04:26 super-awesome logic
  • 00:04:27 here but still it's something we can use
  • 00:04:30 or we need so this is my registrations
  • 00:04:33 and then the total number of
  • 00:04:34 registrations I can now also get that
  • 00:04:37 here so I can simply say total
  • 00:04:40 registrations whatever you like also get
  • 00:04:43 to state here and then return state
  • 00:04:47 registrations length just to show a
  • 00:04:51 different way of using this this
  • 00:04:54 registrations so now I do have my free
  • 00:04:58 getters I'm already using the first one
  • 00:05:00 now let's use the second and third one
  • 00:05:02 to you and I still do it the same way as
  • 00:05:04 any registration of you file set up a
  • 00:05:06 computer property I already do have that
  • 00:05:09 but their access getters and now
  • 00:05:13 registrations now here unlike in the
  • 00:05:16 first case it's less obvious that they
  • 00:05:17 need save super much space but it's the
  • 00:05:20 better practice of using a getter for
  • 00:05:23 accessing the state than directly
  • 00:05:25 accessing the state getters total
  • 00:05:28 registrations would be the right gather
  • 00:05:30 here with that let's save it and let's
  • 00:05:33 have a look if I reload the app looks
  • 00:05:36 good to me works the same way as before
  • 00:05:39 here's another little improvement if you
  • 00:05:42 have multiple gathers or you're using
  • 00:05:44 multiple gathers in one component as we
  • 00:05:46 do here in the registration dot view
  • 00:05:48 files there actually is an easier way to
  • 00:05:51 quickly map those gathers to computed
  • 00:05:55 properties because right now you have to
  • 00:05:58 create a computer property per gather
  • 00:06:00 and that can quickly become very
  • 00:06:02 annoying therefore a view chess gives
  • 00:06:05 you a nice little helper we can view X I
  • 00:06:08 should say we can import it and it's
  • 00:06:10 called map gathers in curly braces from
  • 00:06:14 the view X package now map gathers as
  • 00:06:18 the name suggests allows us to map our
  • 00:06:20 gathers so here in the computed property
  • 00:06:24 in my view instance in this component I
  • 00:06:27 can now say map gathers execute it like
  • 00:06:32 a method and this gets even an array or
  • 00:06:36 an object depending on whether you want
  • 00:06:39 to keep the name of the getter
  • 00:06:41 in the store or want to assign it to a
  • 00:06:44 different name in your component now
  • 00:06:47 let's show the array first here you
  • 00:06:49 would simply lists all the getters you
  • 00:06:51 want to use so for example D
  • 00:06:53 registrations getter simply add it as a
  • 00:06:56 string this is important as a string
  • 00:06:58 this is very important as a strength we
  • 00:07:00 map gathers array and do the same for
  • 00:07:02 the total registrations now here I want
  • 00:07:06 to map them to different names though
  • 00:07:07 because for total registrations I just
  • 00:07:10 want to use total in musk in this
  • 00:07:11 component in order to map it I have to
  • 00:07:14 pass an object instead and here I simply
  • 00:07:17 have my name first so the name I want to
  • 00:07:20 use in this component for example
  • 00:07:23 registrations and then as a string again
  • 00:07:26 the name in D store the name of the
  • 00:07:29 Gator here total this is the name of
  • 00:07:31 what I use in the component and then the
  • 00:07:34 name of the Gator total registrations
  • 00:07:36 was the name we were using in the store
  • 00:07:38 this one here which has copied so that I
  • 00:07:41 don't have any typos looks good now I
  • 00:07:44 can get rid of that don't need a
  • 00:07:46 semicolon here and now this is not a
  • 00:07:50 correct syntax here map getters is a
  • 00:07:53 method and here we're inside an object
  • 00:07:57 map Gathers gives us back an object so
  • 00:08:00 what I can do is simply set map getters
  • 00:08:03 to be the value of this computed
  • 00:08:05 property computed a property in a view
  • 00:08:07 component simply expects to get an
  • 00:08:10 object and this will return us an object
  • 00:08:13 an object with those mapped getters and
  • 00:08:17 as a side note if you would have used
  • 00:08:19 the array without mapping it manually to
  • 00:08:21 different names behind the scenes it
  • 00:08:23 would still have given us a an object
  • 00:08:25 where we have the names mapped it's just
  • 00:08:28 a name and getter name would be the same
  • 00:08:30 then so with this if we save this reload
  • 00:08:33 this again still works so that still
  • 00:08:36 looks good
  • 00:08:37 so that is a little convenience method
  • 00:08:40 if you have multiple getters to map now
  • 00:08:44 what is if you have additional computed
  • 00:08:47 properties of though because map getters
  • 00:08:50 takes up your whole computed property
  • 00:08:52 this computed property space in your
  • 00:08:55 so to say so if you had any other
  • 00:08:57 computed property not related together
  • 00:09:00 how would you add it you can
  • 00:09:02 conveniently add it when using es6
  • 00:09:05 syntax in this case you do have the
  • 00:09:09 spread operator and this is this
  • 00:09:12 operator free dots what this will do is
  • 00:09:15 it takes the object again map catered
  • 00:09:17 getters returns an object in the end and
  • 00:09:19 simply pulls out the properties in this
  • 00:09:23 object and distributes them in this
  • 00:09:26 parent object this object here so it
  • 00:09:30 gets the properties out of the object
  • 00:09:32 returned by map getters and puts them
  • 00:09:34 into the computer property object thus
  • 00:09:36 allowing us to add additional computer
  • 00:09:41 properties yet there's a typo but this
  • 00:09:43 is what it allows us to do but right now
  • 00:09:46 it would not work because this spread
  • 00:09:49 operator is not supported by this view
  • 00:09:52 seal I set up as of now we need a
  • 00:09:54 special package to support it so here I
  • 00:09:57 will simply install this for running npm
  • 00:09:59 install – – save def because it's a
  • 00:10:02 development dependency and then it's
  • 00:10:05 called
  • 00:10:05 babel babel is the transpiler
  • 00:10:08 transpiling or es6 – es5 code babel
  • 00:10:11 preset stage – because it's a stage to
  • 00:10:15 feature the es specifications are kind
  • 00:10:20 of published in stages so with that
  • 00:10:22 added i also need to add a d babel RC
  • 00:10:24 file here we need to add a new array
  • 00:10:27 holding this stage to preset we just
  • 00:10:32 installed this will allow the app to
  • 00:10:34 compile correctly though you need to
  • 00:10:36 restart the npm run dev process because
  • 00:10:39 we added something we change the build
  • 00:10:40 process so with that you see it now
  • 00:10:43 works again and now you're seeing the
  • 00:10:46 full power of gathers including the map
  • 00:10:48 getters method to conveniently get
  • 00:10:50 access to multiple gathers and map them
  • 00:10:53 to your own properties keep in mind this
  • 00:10:55 is only an option you can of course also
  • 00:10:58 just map it manually as we do it here in
  • 00:11:01 your registration dot view file in the
  • 00:11:03 next video in this series we're going to
  • 00:11:05 have a look at me
  • 00:11:07 patience a better way of changing the
  • 00:11:09 state because the way we're doing it
  • 00:11:11 right now isn't really the most optimal
  • 00:11:14 one