Coding

STATE & STORE | VueJS & Vuex | Learning the Basics

  • 00:00:01 welcome to this video welcome to another
  • 00:00:04 video about the view chairs in this
  • 00:00:06 video I'll introduce you to view X a
  • 00:00:09 nice add-on to view chairs which makes
  • 00:00:11 state management a whole lot easier now
  • 00:00:15 why do we need to make it easier though
  • 00:00:17 well I prepared a little example
  • 00:00:19 application to which you'll find a link
  • 00:00:20 in the video description which will show
  • 00:00:22 you why you might quickly reach the
  • 00:00:25 point where you need kind of a better
  • 00:00:27 estate management than doing it like
  • 00:00:29 here so let's take a look I open this
  • 00:00:32 project which again you can find in the
  • 00:00:34 video description and there I need to
  • 00:00:37 run NPM run dev this was set up with the
  • 00:00:39 view CLI about which I also have a video
  • 00:00:41 on this channel and if we have a look at
  • 00:00:44 the running application we see we got
  • 00:00:46 two sections here basically two
  • 00:00:48 components and one we can register and
  • 00:00:51 in the other one we can then unregister
  • 00:00:53 as you can see if I click here the
  • 00:00:54 counter goes up and we see the date here
  • 00:00:56 and everything is great well it's kind
  • 00:01:00 of great let's have a look at the code
  • 00:01:01 it's a very simple application as you
  • 00:01:03 can tell I got only two components and
  • 00:01:05 my app component here and in the app
  • 00:01:08 component I'm basically managing my
  • 00:01:10 whole state with state I mean I manage
  • 00:01:13 my registrations here and my users the
  • 00:01:17 total number of users or all the users I
  • 00:01:20 have and then I manage the state by for
  • 00:01:23 example if I click any registration dot
  • 00:01:26 view father I can sign up if I click on
  • 00:01:28 this register button here I've fired you
  • 00:01:30 register user method this one here and
  • 00:01:33 distant emits an event use registered
  • 00:01:36 and passes the user it also sets the
  • 00:01:38 registered state on the user to true and
  • 00:01:40 the user gets into this component in the
  • 00:01:43 first place because the user is part of
  • 00:01:45 this users array which again is passed
  • 00:01:48 into the registration component here as
  • 00:01:51 a prop so back to the signup we're
  • 00:01:55 letting this user registered event and
  • 00:01:57 I'm listening to this here in my app to
  • 00:01:59 view file and when it's fired I'm
  • 00:02:01 triggering the user registered method
  • 00:02:03 here and there and basically setting a
  • 00:02:05 date and I'm pushing a new registration
  • 00:02:07 on my registrations array and I'm
  • 00:02:11 basically doing these same just in
  • 00:02:13 the opposite direction when a user and
  • 00:02:15 registers then I'm firing the user
  • 00:02:17 unregistered method and so on so this is
  • 00:02:20 basically my state management taking
  • 00:02:22 place in the app dot view file and I
  • 00:02:25 pass props to the other components and I
  • 00:02:27 listen to their events now don't get me
  • 00:02:30 wrong there's nothing wrong with that
  • 00:02:31 and for a very tiny application like
  • 00:02:33 this one that's perfectly fine but
  • 00:02:36 imagine the same in a bigger application
  • 00:02:39 where you have even more components
  • 00:02:41 interacting with your users interacting
  • 00:02:43 with your registrations and also with
  • 00:02:45 other parts of your application state so
  • 00:02:48 state basically refers to the variables
  • 00:02:52 or the values of certain properties if
  • 00:02:55 you want to call like this you want to
  • 00:02:56 keep around because multiple components
  • 00:02:58 use them and the user the user
  • 00:03:00 interacting with your app changes them
  • 00:03:03 for example I change the state by
  • 00:03:05 clicking on register here or unregister
  • 00:03:08 now if you imagine that in a bigger
  • 00:03:11 application it quickly becomes very
  • 00:03:13 difficult to manage you have a lot of
  • 00:03:15 props and events to which you're
  • 00:03:17 listening and also you got a lot of
  • 00:03:19 different parts in your application
  • 00:03:22 omitting these events changing values it
  • 00:03:24 could quickly become difficult to see
  • 00:03:27 what changes things where and so on
  • 00:03:29 therefore we have a better pattern
  • 00:03:32 actually a whole add-on which handles
  • 00:03:35 this and this is view X now in this
  • 00:03:38 video I want to show you how to get
  • 00:03:40 started with UX how to set it up and how
  • 00:03:43 to use it in it's very very basic and
  • 00:03:46 not yet final form and in the next
  • 00:03:49 videos will enhance this application and
  • 00:03:52 use more and more features of UX to
  • 00:03:54 finally get to a point where we can say
  • 00:03:56 yes now we're using view X as should be
  • 00:03:59 used and our state management is much
  • 00:04:02 clearer now so let's get started and
  • 00:04:04 let's set up UX for that I will go to
  • 00:04:07 the console to the terminal and run npm
  • 00:04:09 install – – save and then it's simply
  • 00:04:12 view X that's the name of the package so
  • 00:04:15 this will pull it down add it to my
  • 00:04:17 package to chase and install the 2.0
  • 00:04:20 version which is the version which
  • 00:04:21 you'll need and with that I now need to
  • 00:04:23 set it up now I could do that in my main
  • 00:04:26 dot J's
  • 00:04:27 while but a better convention is to do
  • 00:04:29 this in a store dot J's file so let's
  • 00:04:31 add a store dot J's file why store
  • 00:04:34 because view X is all about having a
  • 00:04:38 central store which holds your state and
  • 00:04:41 which allows you then to manage this
  • 00:04:43 state in the end therefore I call the
  • 00:04:46 file store Duchess and I will create a
  • 00:04:48 store there now if you create it I will
  • 00:04:50 first import view from view and I will
  • 00:04:54 also import mu X from view X this newly
  • 00:04:58 added package I just installed the first
  • 00:05:01 thing I got to do is I have to add 3x as
  • 00:05:04 a plug-in wire the view use method here
  • 00:05:08 this will unlock some additional
  • 00:05:10 properties and methods I can use and
  • 00:05:12 then I need to set up my store I will
  • 00:05:15 export it because I want to use it
  • 00:05:17 outside of this J's file and on name it
  • 00:05:20 or store it a constant name store the
  • 00:05:24 store is then created with the new
  • 00:05:26 keyword or operator here and then view X
  • 00:05:30 dot store so this view X package we're
  • 00:05:33 importing up here has this store object
  • 00:05:37 or a constructor we can instantiate here
  • 00:05:40 now to the store I need to pass a
  • 00:05:42 JavaScript object configuring that store
  • 00:05:44 now how do I configure such a store the
  • 00:05:48 key thing every store has to have is the
  • 00:05:52 state so this state property this is a
  • 00:05:55 reserved word kind of view chess or view
  • 00:05:58 X to be precise will recognize so this
  • 00:06:01 is my state and this is now also a
  • 00:06:04 JavaScript object and here I could have
  • 00:06:07 my users and my registrations so let me
  • 00:06:11 quickly grab them from my app W file
  • 00:06:15 I'll cut them store and add them here
  • 00:06:19 and now I'm setting them up here with
  • 00:06:22 initial values so the M key array for T
  • 00:06:26 registrations and the array of user
  • 00:06:29 objects for the users and with that I'm
  • 00:06:31 already using a store though of course
  • 00:06:34 the app is now broken but we'll fix it
  • 00:06:36 first I need to go to the main dot J's
  • 00:06:39 file and of course
  • 00:06:40 year I need to import my store so here I
  • 00:06:43 will import store from the store dot J's
  • 00:06:49 file and then I need to add that store
  • 00:06:52 to my root view instance I do this by
  • 00:06:54 simply adding store : store or since
  • 00:06:57 we're using es6 i can also take the
  • 00:07:00 shortcut and just add store and it will
  • 00:07:02 automatically assign store to that since
  • 00:07:05 it's the same name with that the store
  • 00:07:08 is set up in your store dot JS file we
  • 00:07:11 register the initial state or each state
  • 00:07:13 in general off that store and now we of
  • 00:07:16 course edit the store to the main root
  • 00:07:20 view instance here this new view
  • 00:07:22 instance here which manages my whole app
  • 00:07:25 and with the store being registered
  • 00:07:27 there we can now access it from inside
  • 00:07:29 the application so let's do this q x–
  • 00:07:33 is it i will start with the registration
  • 00:07:36 part so here rec where i can sign up in
  • 00:07:38 your registration dot view file right
  • 00:07:41 now and you register user method i'm
  • 00:07:43 simply omitting an event and I'm getting
  • 00:07:46 my user as props here well we don't
  • 00:07:50 really need to follow this pattern
  • 00:07:52 anymore because the app dot view file
  • 00:07:55 which is right now passing users via
  • 00:07:57 props and listening to the event doesn't
  • 00:08:00 need to do that since our users and our
  • 00:08:03 registrations are in the central store
  • 00:08:06 anyways we can just access this store
  • 00:08:09 directly to do so I'll start with my
  • 00:08:11 users I'll remove the props in my
  • 00:08:14 registration dot view file and instead
  • 00:08:16 add a computed property in the computed
  • 00:08:21 property of my view instance of this
  • 00:08:24 component and you can give it any name
  • 00:08:27 I'll stick to users since this is the
  • 00:08:29 name which I'm using up here in this V
  • 00:08:32 for loop users again as a computed
  • 00:08:34 property and all I do here is I return
  • 00:08:37 this and now here is a special property
  • 00:08:40 can access dollar signs stored this is
  • 00:08:43 added because I am registering view X
  • 00:08:46 here with view use so dollar signs store
  • 00:08:49 gives me access to the store then I
  • 00:08:52 access the State
  • 00:08:53 here my users because state users is
  • 00:08:57 what I'm setting up here so I'm now
  • 00:08:59 accessing this array of users in my
  • 00:09:02 registration view file
  • 00:09:04 now with that accessed I can go to my
  • 00:09:08 app W file and get rid of this prop
  • 00:09:11 binding here where I'm passing the props
  • 00:09:14 the users props I can also already get
  • 00:09:16 rid of the event because I will also
  • 00:09:18 change the way I handle this here what I
  • 00:09:21 want to do is in the methods I don't
  • 00:09:23 need to admit this event anymore I
  • 00:09:25 simply want to I can still set user
  • 00:09:29 register to chew right now but what I
  • 00:09:31 wanted to hear is I want to also access
  • 00:09:33 the store the state and here
  • 00:09:36 registrations so this empty array at the
  • 00:09:40 beginning and there I can simply copy
  • 00:09:43 the logic from my app that view file
  • 00:09:45 where I also have my user registered
  • 00:09:48 method I'm copying that code from that
  • 00:09:50 method into my registration W file paste
  • 00:09:53 it in here and now I don't want to call
  • 00:09:56 this registrations push instead I want
  • 00:09:59 to push it on the registration in this
  • 00:10:03 state in my store now I will say one
  • 00:10:06 thing right away manipulating the store
  • 00:10:09 and the state in a store like this is
  • 00:10:11 not a good practice and not how you want
  • 00:10:14 to do it in bigger applications I will
  • 00:10:18 of course in the next videos show a more
  • 00:10:20 elegant way but for now this will do
  • 00:10:22 with that I'm changing the registration
  • 00:10:26 state I can now get rid of user
  • 00:10:28 registers here a registered here in
  • 00:10:30 methods in my app dot view file and I
  • 00:10:34 can now also go to the registrations dot
  • 00:10:37 view file and implement some code here
  • 00:10:41 so instead of getting props also add my
  • 00:10:44 computed property here and here are also
  • 00:10:48 when I get my registrations in this case
  • 00:10:52 and registrations is also fetched from
  • 00:10:56 the store state and their D
  • 00:10:58 registrations array just like that I
  • 00:11:00 need to return it though so this gets D
  • 00:11:03 registrations phone from Mike Lobel
  • 00:11:05 store now when I unread
  • 00:11:07 gesture I can go back to the app dot
  • 00:11:09 view file and copy my user unregistered
  • 00:11:12 code like this I'm going to your
  • 00:11:15 registrations that view file and i'll
  • 00:11:17 simply paste it in here now I need to
  • 00:11:20 make some adjustments though for one
  • 00:11:22 here where I find the user which was
  • 00:11:24 changed I need to access this store
  • 00:11:27 state users and find the user by its
  • 00:11:31 user ID which is saved in the
  • 00:11:32 registration I can then switch use
  • 00:11:36 register to false again and here this
  • 00:11:39 registrations splice where I remove a
  • 00:11:42 registration well here I need to access
  • 00:11:44 this store State registrations and the
  • 00:11:47 same is true here this source state
  • 00:11:50 registrations now I also need to change
  • 00:11:54 the computed total property here I need
  • 00:11:56 to go to my store State registrations
  • 00:11:59 and fetch its length with that all the
  • 00:12:02 logic is in d2 SAP components and I can
  • 00:12:05 get rid of the methods here I can rid of
  • 00:12:07 my competitive a computed property here
  • 00:12:09 and also get rid of data which I didn't
  • 00:12:13 use and I can also get rid of the prop
  • 00:12:17 passing ant event listening in my app
  • 00:12:20 registrations component now let's see if
  • 00:12:24 this works as it should
  • 00:12:26 I'd probably won't because seems like I
  • 00:12:29 got the import in the main dot J's file
  • 00:12:31 wrong and indeed I'm exporting a
  • 00:12:33 constant name stored here I'm importing
  • 00:12:35 something like if I had to define it as
  • 00:12:38 default export which I could do but
  • 00:12:40 since I created a named constant I need
  • 00:12:43 to wrap this in curly braces this is
  • 00:12:45 just es6 import syntax with that if I
  • 00:12:48 save this let's see this looks good
  • 00:12:51 application seems to run let's click on
  • 00:12:54 register well it goes up here but we
  • 00:12:57 don't really see the registrations here
  • 00:13:00 any registrations component and we also
  • 00:13:04 get an error an error that property or
  • 00:13:06 method registrations is not defined and
  • 00:13:09 this happens because here I got two
  • 00:13:12 computed properties setup that of course
  • 00:13:13 won't work
  • 00:13:14 so let's merge them into one dad was
  • 00:13:17 mistake on my say-so
  • 00:13:18 let's save it now we should see a
  • 00:13:20 working up
  • 00:13:21 vacation indeed I can register users I
  • 00:13:23 can unreduced them the missing piece
  • 00:13:26 though is you see they don't really
  • 00:13:29 disappear here on the left they somehow
  • 00:13:31 don't seem to get marked as unregistered
  • 00:13:35 or as registered excuse me and the
  • 00:13:37 reason for this behavior is not a bug
  • 00:13:40 the reasons here in my computer users
  • 00:13:43 property which defines through which
  • 00:13:45 users are looping I'm always returning
  • 00:13:47 all users instead of course I need to
  • 00:13:50 add a filter here and filter if the user
  • 00:13:54 actually is registered or to be precise
  • 00:14:01 if it's not registered only if user is
  • 00:14:04 not registered shall it be returned in
  • 00:14:06 the users array in the end which will be
  • 00:14:08 free which I'll loop so now finally
  • 00:14:11 we'll have an application which works as
  • 00:14:14 it should
  • 00:14:15 now with view X and the central store
  • 00:14:18 and state now what what did get better
  • 00:14:22 compared to the start of this video we
  • 00:14:25 stripped out all the code from the app
  • 00:14:27 to view fall which makes this file more
  • 00:14:29 leaner because the code shouldn't be in
  • 00:14:31 there to be honest we basically put the
  • 00:14:35 code into our to our components but the
  • 00:14:37 important thing is our state the
  • 00:14:40 registrations array and the users array
  • 00:14:42 is kept in one central state our store
  • 00:14:45 here which we access from both the
  • 00:14:48 components and we don't have to omit
  • 00:14:51 events and pass props and so on so this
  • 00:14:54 is an enhancement though of course as I
  • 00:14:57 mentioned the beginning of the video for
  • 00:14:59 small applications the setup might
  • 00:15:02 actually take longer than simply using
  • 00:15:05 the props event pattern which we did at
  • 00:15:07 the beginning but especially in bigger
  • 00:15:09 applications you will see the advantages
  • 00:15:11 of this approach now in the next videos
  • 00:15:14 we will refine this approach and add
  • 00:15:16 some best practices because the way
  • 00:15:18 we're doing it right now isn't really
  • 00:15:20 the best practice but I'll come back to
  • 00:15:22 this in the next videos