Coding

ACTIONS | VueJS 2 & Vuex | Learning the Basics

  • 00:00:01 welcome to number video about view
  • 00:00:03 chairs and view X this video is a part
  • 00:00:06 of a series but we started at a basic
  • 00:00:09 project not using view X at all and we
  • 00:00:11 improve this project by adding gathers
  • 00:00:14 and mutations and the central story at
  • 00:00:16 the beginning and now we've gone pretty
  • 00:00:18 far but there is one big limitation of
  • 00:00:21 this project right now or one possible
  • 00:00:24 limitation should say if we had any
  • 00:00:26 async code being executed as part of a
  • 00:00:29 mutation that won't work
  • 00:00:31 mutations always have to run
  • 00:00:33 synchronously and it makes sense because
  • 00:00:37 mutations are the methods directly
  • 00:00:40 manipulating your store so it would be
  • 00:00:42 kind of bad if they had some async
  • 00:00:44 nature to them because that would mean
  • 00:00:46 that when you commit a mutation it might
  • 00:00:49 not run immediately so if you then get
  • 00:00:52 the value thereafter it might not have
  • 00:00:54 changed yet so therefore it makes sense
  • 00:00:56 that mutations have to run synchronously
  • 00:00:58 but what if you have let's say some HTTP
  • 00:01:02 call which gets you a value which you
  • 00:01:04 then want to use in your commit how
  • 00:01:07 would you handle this because with
  • 00:01:09 mutations as we use it right now that is
  • 00:01:11 simply not possible or not possible
  • 00:01:14 inside of your store at least so how
  • 00:01:17 could you change this the answer is
  • 00:01:19 actions and in this video we will learn
  • 00:01:21 what actions are and how we use them and
  • 00:01:24 how we can combine them with
  • 00:01:26 asynchronous code let's start by setting
  • 00:01:29 up an action I do does indeed store the
  • 00:01:32 chess files in my store and I already
  • 00:01:35 added the state gathers and mutations I
  • 00:01:37 guess you can guess how I do add actions
  • 00:01:40 I add a new property named actions and
  • 00:01:44 this also is an object here I choose any
  • 00:01:46 name for the action and I will name it
  • 00:01:49 register and oftentimes you will have
  • 00:01:51 the same name for the action and the
  • 00:01:53 mutation because the action is kind of a
  • 00:01:55 middleman running before you actually
  • 00:01:57 commit the mutation here the action also
  • 00:02:02 gets an argument and this argument
  • 00:02:05 actually is the context of this action
  • 00:02:08 now the name is of course up to you the
  • 00:02:11 name you assigned to this argument but
  • 00:02:12 will be
  • 00:02:13 context and context is almost the same
  • 00:02:16 as store but not completely the same
  • 00:02:19 therefore it's a different name now on
  • 00:02:22 this context we can simply run the
  • 00:02:26 commit method because as I said it's
  • 00:02:29 pretty much the same as the source store
  • 00:02:31 but not entirely technically it's a
  • 00:02:33 different object but it does have a
  • 00:02:35 commitment and therefore here I can
  • 00:02:37 commit the register method which excuse
  • 00:02:41 me did register mutation now of course
  • 00:02:44 like a mutation the action can also
  • 00:02:47 receive a payload so either a payload
  • 00:02:50 object like in the unregister approach
  • 00:02:52 here or the value itself so use your ID
  • 00:02:56 here and then I can also pass this as a
  • 00:02:58 second argument to the commit method
  • 00:03:01 because somehow I need to get that value
  • 00:03:05 to the mutation
  • 00:03:06 now with that action setup I can go to
  • 00:03:09 my registration view file where I right
  • 00:03:11 now directly commit the mutation and
  • 00:03:14 here I can now instead call this store
  • 00:03:17 dispatch
  • 00:03:18 so like the mutation I'm not calling
  • 00:03:22 actions and then executing the action
  • 00:03:25 itself instead note we have to dispatch
  • 00:03:27 method and this means I just batch the
  • 00:03:30 action surprisingly here I do need to
  • 00:03:34 pass the name of the action which is
  • 00:03:36 register and then as a second argument I
  • 00:03:40 payload user ID or alternatively like
  • 00:03:43 with a mutation in the registrations dot
  • 00:03:46 view file we could also dispatch it with
  • 00:03:49 one single object where you have the
  • 00:03:51 type as a set property and then any
  • 00:03:55 other amount of properties you want to
  • 00:03:57 use in this case though you need to make
  • 00:03:59 sure that here you're getting the
  • 00:04:01 payload in general and you access your
  • 00:04:03 values like we do it here on the
  • 00:04:05 unregistered mutation if I totally lost
  • 00:04:08 you now have a look at the last video in
  • 00:04:10 the series there I do explain this
  • 00:04:12 approach of passing a payload back to
  • 00:04:14 the action though we're dispatching it
  • 00:04:17 and with that I'd say let's see this in
  • 00:04:20 action well it looks good the app
  • 00:04:22 behaves exactly like before so what did
  • 00:04:25 we gain by
  • 00:04:26 using action here well what we gained is
  • 00:04:29 right now nothing but now we can execute
  • 00:04:33 async code here because as I mentioned
  • 00:04:36 in the beginning inside of a mutation so
  • 00:04:38 inside of these methods here
  • 00:04:40 you can't run asynchronous code
  • 00:04:44 you always have to manipulate your state
  • 00:04:47 in a synchronous manner but here in the
  • 00:04:51 action before you actually commit it
  • 00:04:53 you can run asynchronous code and yes of
  • 00:04:56 course you would have been able to run
  • 00:04:58 it simply in your component before
  • 00:05:00 committing but then again you would have
  • 00:05:02 that mixture of having some logic in
  • 00:05:04 your components and some logic in your
  • 00:05:06 store you really want to have all these
  • 00:05:09 store and state related logic in your
  • 00:05:10 store though therefore I run the action
  • 00:05:13 here or decode now let's simulate some
  • 00:05:16 async action by simply setting a timer
  • 00:05:18 over let's say one second and after that
  • 00:05:22 second is over then we will commit this
  • 00:05:26 like that
  • 00:05:27 now with this approach if we have a look
  • 00:05:31 at an outlet register you see it took a
  • 00:05:34 second before it actually happened
  • 00:05:36 unregistering happens instantly though
  • 00:05:37 because it didn't set a time earlier so
  • 00:05:40 with that you see the difference here we
  • 00:05:43 can and we are allowed to run
  • 00:05:45 asynchronous code and mutations we are
  • 00:05:48 not allowed to now one additional load
  • 00:05:52 note since we are mostly only interested
  • 00:05:55 in the commit method here you don't have
  • 00:05:58 to get the full context object you can
  • 00:06:01 also use an average or six feature
  • 00:06:03 called deconstruction where you simply
  • 00:06:06 use this syntax here curly braces and
  • 00:06:10 then any name you choose to simply
  • 00:06:13 extract and then the name of the
  • 00:06:16 property you want to extract to directly
  • 00:06:19 extract that property from the object
  • 00:06:22 you're getting as an argument throwing
  • 00:06:24 away the other properties that is
  • 00:06:26 something you have to keep in mind but
  • 00:06:27 if you don't need them that's okay and
  • 00:06:29 with that you can leave out the context
  • 00:06:32 thing and directly get the commit method
  • 00:06:35 in this case so this is an action here
  • 00:06:38 running some async code
  • 00:06:40 now since we dispatch our action here in
  • 00:06:44 the registration dot view file we have
  • 00:06:47 the same behavior as before with dad we
  • 00:06:50 finished our view X implementation using
  • 00:06:53 the state in our central store using
  • 00:06:56 gathers to get the state or get some
  • 00:06:59 values depending on that state using
  • 00:07:02 mutations to change the state and using
  • 00:07:04 actions to trigger mutations possibly
  • 00:07:07 after running some async code before
  • 00:07:09 doing so these are all great things and
  • 00:07:13 with that I hope you get a solid
  • 00:07:14 understanding of how UX works why you
  • 00:07:18 might want to use it and how you could
  • 00:07:20 use it here I get a little graph showing
  • 00:07:23 the whole flow of actions and all values
  • 00:07:27 and it's basically just the thing we
  • 00:07:29 built throughout the last videos but
  • 00:07:31 with that and the videos that hopefully
  • 00:07:33 is crystal clear how you can use view X
  • 00:07:35 how state travels and how values travel
  • 00:07:39 through your application and why it
  • 00:07:40 might be beneficial now I got one more
  • 00:07:43 video in this series and in this last
  • 00:07:45 video I will show you some additional
  • 00:07:48 tricks or additional things about UX see
  • 00:07:52 you there bye