Coding

Manage State with Vuex | Vue.js + Vuetify + Firebase FULL PROJECT

  • 00:00:01 the application we're building in this
  • 00:00:03 you've applied fire based applications
  • 00:00:05 taking shape we get our cover solo
  • 00:00:08 meetups you can click the meetups to see
  • 00:00:09 the individual one forget the list of
  • 00:00:11 meetups here
  • 00:00:12 well only one meetup in there right now
  • 00:00:14 which is one less than in the carousel
  • 00:00:16 and the reason for that is that we're
  • 00:00:18 not managing the application state
  • 00:00:20 central yet time to change this in this
  • 00:00:23 video where it will add view X to change
  • 00:00:26 the way we manage our application state
  • 00:00:32 to change the way we display our or we
  • 00:00:35 manage our meetups we need to install UX
  • 00:00:38 so I'll cancel my death server process
  • 00:00:41 and run NPM install – – save to save it
  • 00:00:45 as a production dependency view X that's
  • 00:00:49 all with that I'll now create a new
  • 00:00:52 folder in the source folder which I'll
  • 00:00:55 name store that is where I want to
  • 00:00:58 manage my store and here I'll simply add
  • 00:01:00 a index dot JSP for now now in that
  • 00:01:04 index dot JSP of first of all import
  • 00:01:08 view again from the view package with
  • 00:01:11 with a lowercase B oops without a colon
  • 00:01:15 semicolon and then import view X from UX
  • 00:01:18 we just installed that with that I can
  • 00:01:22 now use it so with view use I can add
  • 00:01:25 this plug-in so that you will also
  • 00:01:28 inject the buicks store into all our
  • 00:01:30 components and now we can start working
  • 00:01:33 with that so for that I'll export a
  • 00:01:35 constant which we'll name stored which
  • 00:01:38 is a new view X store and we need to
  • 00:01:42 pass an object to that function here in
  • 00:01:45 that function that object or excuse me
  • 00:01:48 we're now going to configure our store
  • 00:01:50 the store has a state and we also set up
  • 00:01:54 the initial state there will have some
  • 00:01:57 mutations – oops mutations to change
  • 00:02:01 that state will then have some actions
  • 00:02:05 to dispatch the mutations and if that's
  • 00:02:07 all Brent you make sure to check out my
  • 00:02:09 view X series I have here on this
  • 00:02:11 channel and will actually also have some
  • 00:02:15 getters to get to stored in our
  • 00:02:17 components now let's start by setting up
  • 00:02:21 the state here and I will add a property
  • 00:02:25 called loaded meetups you load it
  • 00:02:27 because we actually do load them from
  • 00:02:29 firebase later you could of course all
  • 00:02:32 just name this meetups what it will be
  • 00:02:34 though is an array of objects and
  • 00:02:37 actually if you go to the home component
  • 00:02:39 I can take this array here for now we
  • 00:02:43 might change this throughout this
  • 00:02:44 application
  • 00:02:45 but that is what I'm going to start with
  • 00:02:47 so that now oops wrong folder here in
  • 00:02:50 the state
  • 00:02:51 we actually stored our meetups in UX now
  • 00:02:54 in our view X state so that once you
  • 00:02:57 work with it we use the same state
  • 00:02:58 everywhere in our application so that is
  • 00:03:02 the first step here I do have my loaded
  • 00:03:05 meetups there I will also add a user
  • 00:03:07 object that should be authenticated user
  • 00:03:10 and right now with it nothing about user
  • 00:03:12 authentication will also add that but
  • 00:03:14 for now hard-coded user in there the
  • 00:03:17 user shall have an ID let's again roll
  • 00:03:20 over the keyboard here and the user
  • 00:03:23 should have a registered meetups
  • 00:03:25 property which is an array which will
  • 00:03:28 actually list IDs for example this one
  • 00:03:31 year of meetups the user date register
  • 00:03:34 for and/or implement a registration
  • 00:03:37 functionality soon – that's the state I
  • 00:03:40 want to work with for now now the next
  • 00:03:43 step is to actually add a getter so that
  • 00:03:45 we can use these meetups in other places
  • 00:03:47 of our application I'll add the first
  • 00:03:51 scatter which I'll name loaded meetups
  • 00:03:54 just like the mutation here loaded
  • 00:03:56 meters is a normal getter so it receives
  • 00:03:58 the state and here I want to return
  • 00:04:01 state loaded me taps referring to well
  • 00:04:06 this property up there and then I
  • 00:04:09 actually want to sort them so I call the
  • 00:04:11 sort method a normal JavaScript method
  • 00:04:13 this will then also return a new array
  • 00:04:16 so not this original array but a new
  • 00:04:19 array and sort takes a function which
  • 00:04:22 basically takes cue argument me to have
  • 00:04:24 a and meet a B because it will always
  • 00:04:26 compare a pair of meetups until it has
  • 00:04:30 compared all of them and here we now
  • 00:04:33 return true or false if you return true
  • 00:04:35 that means we'd have a goes first if we
  • 00:04:38 return false
  • 00:04:39 this means B so that allows you to sort
  • 00:04:41 all these pairs and their I now want to
  • 00:04:44 compare meet up a the date which we
  • 00:04:47 haven't added yet so that's a property
  • 00:04:49 we have to add should be greater than
  • 00:04:51 meet up B date so that we just play them
  • 00:04:54 by date so there is a data property to
  • 00:04:58 comparation I'll also add date here and
  • 00:05:00 actually why don't we make this a bit
  • 00:05:03 more readable by splitting all these
  • 00:05:05 properties over separate lines so that's
  • 00:05:08 how we can quickly do that
  • 00:05:10 let's reformat that now that's a bit
  • 00:05:13 more readable and now we can add this
  • 00:05:15 new date property now how should that
  • 00:05:18 look like
  • 00:05:18 for now I'll store it in this format
  • 00:05:20 2017 17 as 717 to reference to 7th July
  • 00:05:27 visuals also something which will
  • 00:05:30 probably change later for now they
  • 00:05:32 should do though and maybe let's put the
  • 00:05:35 second meetup here to 19th July so that
  • 00:05:39 is how we return loaded meetups here
  • 00:05:42 sorting it in together and then
  • 00:05:44 returning this new sorted array I also
  • 00:05:46 want to add a loaded meetup stay
  • 00:05:49 together
  • 00:05:50 so not loaded me depths but only one
  • 00:05:52 here I want you load one single meetup
  • 00:05:55 and I actually want to receive that
  • 00:05:57 meetup ID here to find the right one we
  • 00:06:00 can implement such a methods or such a
  • 00:06:03 gather by returning a function here
  • 00:06:06 actually and that function takes the
  • 00:06:09 meetup ID I will show you how to pass it
  • 00:06:11 to the function soon and then here we
  • 00:06:14 now return our state reach out to our
  • 00:06:18 loaded meetups in the state but then use
  • 00:06:21 the find method to find only one meter
  • 00:06:24 this will be executed for each meetup in
  • 00:06:27 the array so it will execute this
  • 00:06:28 function we pass here to find for each
  • 00:06:31 meetup in the array but then we return
  • 00:06:33 true only if it is to me that we were
  • 00:06:35 looking for and that's the case that the
  • 00:06:37 meetup dot equals the meetup ID we're
  • 00:06:41 passing in here as a function so that is
  • 00:06:45 the second quatre want to get all V does
  • 00:06:48 and want to only load one meetup the one
  • 00:06:50 we selected by ID
  • 00:06:51 now we're not using these getters yet so
  • 00:06:54 let's use them let's start in the home
  • 00:06:56 that view file where we have our color
  • 00:06:58 cell here I now want you well load them
  • 00:07:02 and not hard killed them so I'm going to
  • 00:07:04 get rid of data and instead I'll add
  • 00:07:06 computers here computed is the way to
  • 00:07:09 use view X
  • 00:07:10 Anders since it will update
  • 00:07:12 automatically and always give us the
  • 00:07:14 latest state and here I'll add a
  • 00:07:18 property named meetups or actually what
  • 00:07:21 I'm using here yeah Smith apps so let's
  • 00:07:23 name it meetups here queue we just is
  • 00:07:26 the computer property and here I want to
  • 00:07:28 return this store gathers and then load
  • 00:07:33 it meetups that looks like a good idea
  • 00:07:37 actually we might opt into a different
  • 00:07:41 functionality maybe we want to have some
  • 00:07:44 featured meetups here on the carousel
  • 00:07:47 featured meetups to have not all the
  • 00:07:50 meetups here but only a subset so we can
  • 00:07:52 do that by going back to the store and
  • 00:07:54 adding a new gather featured me that's
  • 00:07:57 the one I'm calling right now
  • 00:07:59 and this actually now is a special
  • 00:08:03 gather here I'll not just receive the
  • 00:08:05 state but also the avid gathers because
  • 00:08:08 here I really want to return getters
  • 00:08:14 loaded meetups referring to dis gather
  • 00:08:17 but then not all the meetups but simply
  • 00:08:20 just a slice where I take the first
  • 00:08:22 meetups and not all of them so now only
  • 00:08:25 returning a subset here at a typo so now
  • 00:08:28 I have two featured meetup scatter which
  • 00:08:30 I'm using here in this computer property
  • 00:08:32 in the home dot view file for my
  • 00:08:35 carousel so with that I'm only fetching
  • 00:08:37 some meetups
  • 00:08:38 let's run anything around EV and see if
  • 00:08:41 we made a mistake thus far and if that
  • 00:08:43 works side note it won't but can you
  • 00:08:46 already tell what won't work go back
  • 00:08:50 here you see we get an error cannot read
  • 00:08:53 property getters of undefined
  • 00:08:55 well we set up the store here right we
  • 00:08:59 exported but we never imported we never
  • 00:09:01 use it i it's not included in our final
  • 00:09:04 bundle so we have to go to the main dot
  • 00:09:06 JS file and actually imported here so
  • 00:09:09 here I'll add I import and I'll import
  • 00:09:11 stored from dot slash store and we could
  • 00:09:16 add slash index but again this specific
  • 00:09:19 web pack config we're using here will
  • 00:09:21 automatically look for index dot JSP and
  • 00:09:24 in there we indeed do export a constant
  • 00:09:29 and store which is why I'm using it
  • 00:09:31 named import here now we have to use it
  • 00:09:34 by simply adding it to our root view
  • 00:09:37 instance now if we save this we get an
  • 00:09:40 error
  • 00:09:40 extra semicolon here in the store we see
  • 00:09:44 where do they do that yeah you're
  • 00:09:46 working with typescript the last day so
  • 00:09:48 I'm back in to put semicolons everywhere
  • 00:09:51 state and now however this looks good we
  • 00:09:54 loaded the same me that's asked for it
  • 00:09:56 but now from our do X store now let's
  • 00:09:59 make sure that we all load them here in
  • 00:10:02 our list of meetups so in the immediate
  • 00:10:05 start view file here I'll now also add a
  • 00:10:08 script area like that
  • 00:10:14 want to export a default object here at
  • 00:10:17 my computed property to be able to get
  • 00:10:22 my meetups here to meetups should also
  • 00:10:25 reach out to the store
  • 00:10:27 oops return this store gathers and then
  • 00:10:31 here it still loaded meetup so not just
  • 00:10:33 the featured ones here but all the
  • 00:10:35 meetups also never make the mistake of
  • 00:10:37 adding parentheses here even though you
  • 00:10:39 set them as up as methods in the index
  • 00:10:42 dot J's files these getters
  • 00:10:44 you don't call them as Gators but as
  • 00:10:46 properties so we're referring to your
  • 00:10:49 loaded meetup scatter now and that gives
  • 00:10:51 us a chance of actually replicating this
  • 00:10:53 card so here I'll add v4 and loop
  • 00:10:57 through meet up in meetups
  • 00:11:00 binds the key to meetup ID now because
  • 00:11:04 you should use a key when going through
  • 00:11:05 a list of something and outputting it
  • 00:11:08 and now we can use that meetup here to
  • 00:11:11 actually replace the hard coded content
  • 00:11:14 with meetup title here the image here
  • 00:11:20 with meetup and then it was image URL if
  • 00:11:26 I'm not mistaken image URL this property
  • 00:11:28 here so we can use that in our meetups
  • 00:11:33 of you file we need to bind source
  • 00:11:36 dynamically with we bind or the shortcut
  • 00:11:39 just colon source the data something we
  • 00:11:44 can all the output though the formatting
  • 00:11:45 won't be super pretty for now meetup
  • 00:11:47 date and that is it actually so here
  • 00:11:53 well almost but there's one other thing
  • 00:11:55 we're now creating a list that's not
  • 00:11:59 super pretty though so maybe we actually
  • 00:12:03 add a margin below the individual card
  • 00:12:06 and for that I'll actually take my for
  • 00:12:11 loop and place it not on the card but on
  • 00:12:14 the V layout to replicate these rows now
  • 00:12:17 you see it looks the same but this now
  • 00:12:20 makes it easy for me to add a class
  • 00:12:21 where we use margin bottom Q maybe learn
  • 00:12:25 about that spacing
  • 00:12:27 to add a little bit of margin so now we
  • 00:12:29 got our meetups distributed here that's
  • 00:12:32 working now there's one thing missing we
  • 00:12:37 need to make this link work right now
  • 00:12:38 it's hard-coded to always point to meet
  • 00:12:40 up slash one
  • 00:12:42 now we're loading the meetups though and
  • 00:12:43 these meetups got an ID so we can
  • 00:12:45 actually use that ID here in the router
  • 00:12:48 link to bind the queue property
  • 00:12:50 dynamically again with be binds to or
  • 00:12:53 just : – and then here it's meetups as a
  • 00:12:58 string here but then combined with
  • 00:13:03 meetup dot and this ensures that our
  • 00:13:07 link now to check it at the bottom or in
  • 00:13:11 the URL once I click it actually loads
  • 00:13:13 the idea of the meetup we actually load
  • 00:13:15 so that is now a way of getting well –
  • 00:13:19 Demi double you want to go to and of
  • 00:13:21 course you could come up with a solution
  • 00:13:23 to actually transform the title of the
  • 00:13:25 meetup into an ID to have a nicer
  • 00:13:28 looking URL here for now I'm going to
  • 00:13:30 stick with that approach here on the
  • 00:13:33 single meetup age though I also don't
  • 00:13:35 want to load you hard killed one so I'll
  • 00:13:38 meet up you here I'll also add a script
  • 00:13:41 section export my default object here
  • 00:13:46 and the computed property because I want
  • 00:13:48 to reach out to view acts here queue and
  • 00:13:50 there I want to get my meetup the one I
  • 00:13:54 load it that should also be a functions
  • 00:13:57 and says well in the computer property I
  • 00:14:00 want to return this state and so we just
  • 00:14:05 store getters and now here it's the
  • 00:14:08 loaded Meetup and do you remember that
  • 00:14:11 once you set it up we actually use this
  • 00:14:14 special syntax of returning a function
  • 00:14:17 which took the meetup ID such getters
  • 00:14:21 can conveniently be called by now adding
  • 00:14:23 parentheses what you normally don't do
  • 00:14:26 but now you're calling the function
  • 00:14:28 you're returning and here we can now
  • 00:14:30 pass the meetup ID we have to get it ID
  • 00:14:34 we could reach out to this colon route
  • 00:14:38 parens ends on or we use
  • 00:14:40 another nice feature of the view router
  • 00:14:43 we expect to get props here I expect to
  • 00:14:47 get the ID as a prop and therefore I can
  • 00:14:51 simply pass this ID by default I don't
  • 00:14:55 get my route parameters as props though
  • 00:14:57 but we can go to the router and actually
  • 00:15:01 set this route which has a dynamic
  • 00:15:04 parameter app to use or to pass
  • 00:15:06 parameters as props to the component
  • 00:15:09 we're loading so you're we do this by
  • 00:15:11 simply setting props to true and that's
  • 00:15:13 all with that you'll now see that is
  • 00:15:18 loads correctly we don't get an error
  • 00:15:19 and you will see that it really works
  • 00:15:22 once you start using the meet up we're
  • 00:15:23 loading here so that we actually output
  • 00:15:27 it here with string interpolation meet a
  • 00:15:29 title replaced earlier replace the
  • 00:15:33 source by adding a colon to make it
  • 00:15:35 dynamic and then pointing to meet up
  • 00:15:38 image URL and then changing the date
  • 00:15:44 that's all we have right now so here
  • 00:15:46 meetup date like that we do that now you
  • 00:15:54 see still works that's to be Devon Paris
  • 00:15:56 I click on the middle in New York we're
  • 00:15:59 in the meetup in New York page so that
  • 00:16:02 is working as expected
  • 00:16:03 of course we still have the location and
  • 00:16:06 dummy text articles in there we're going
  • 00:16:08 to work on this for now I'm super happy
  • 00:16:11 with how that works
  • 00:16:13 that is view X added to the party now
  • 00:16:16 let's see what else you can do with our
  • 00:16:18 application in the next video of this
  • 00:16:20 series