Coding

BONUS | VueJS 2 & Vuex | Learning the Basics

  • 00:00:01 welcome back to the beauty of UX serious
  • 00:00:04 this is the last video of this series I
  • 00:00:07 hope you already learned a lot in this
  • 00:00:09 video I just want to show you two
  • 00:00:11 additional tiny tweaks or things to know
  • 00:00:15 to keep in mind or free actually the
  • 00:00:18 first one if you haven't found it
  • 00:00:20 already it always lost in the video
  • 00:00:22 description though is the official
  • 00:00:24 documentation well it's not that hard to
  • 00:00:26 find if you google for view X that's the
  • 00:00:28 second result here it's view X dot view
  • 00:00:31 chest org here you can dive even deeper
  • 00:00:34 and learn some additional things about
  • 00:00:36 view X but the main concept of course is
  • 00:00:39 the one I showed you in the last videos
  • 00:00:41 now another very useful thing when we're
  • 00:00:44 in the browser right now is our the view
  • 00:00:48 developer tools if you google for them
  • 00:00:51 you should you should find a Chrome page
  • 00:00:55 and I'm talking about the Chrome browser
  • 00:00:57 there I don't even know if it also
  • 00:00:59 exists for other browsers and there you
  • 00:01:01 can add the view dev tools as a
  • 00:01:04 extension to the Chrome browser now I
  • 00:01:07 already got them added and what they
  • 00:01:09 allow you to do is if you open them in
  • 00:01:11 your developer tool and then view you
  • 00:01:16 for one get your normal tools showing
  • 00:01:18 you the components on your page app
  • 00:01:21 registration and registrations where if
  • 00:01:24 the values use there so that's nice but
  • 00:01:27 you also get that UX tab and the cool
  • 00:01:30 thing is watch what happens if I click
  • 00:01:32 on register you see you see the commit
  • 00:01:36 here if I click on register again you
  • 00:01:39 see another commit and now if you click
  • 00:01:41 on an older one it jumps back to that
  • 00:01:44 state so you can time travel through
  • 00:01:47 your list of states to debug your
  • 00:01:50 application and quickly see how the
  • 00:01:52 application looked like at another point
  • 00:01:55 of time you also see the payload of each
  • 00:01:58 commit and so on see the state of the
  • 00:02:02 commit and a great tool to dive deeper
  • 00:02:05 you can also if you don't want to jump
  • 00:02:09 back temporarily but reset your app
  • 00:02:11 simply click revert
  • 00:02:13 and you're back to that state or you
  • 00:02:16 revert at that state I should say so if
  • 00:02:18 I revert that state and back to the
  • 00:02:20 state before if I unregister and every
  • 00:02:22 word that I'm back to that state so this
  • 00:02:25 is another great tool for debugging your
  • 00:02:27 application the last thing I wanted to
  • 00:02:30 show you is if you have a look at the
  • 00:02:32 app at the store the chase file this is
  • 00:02:36 not a complex app but the store the
  • 00:02:38 chase file is already not very big but
  • 00:02:41 it has a lot of code in it well you can
  • 00:02:45 split it up and you will see this in
  • 00:02:47 bigger projects there you typically
  • 00:02:49 create a new folder which you may name
  • 00:02:51 store for example could also name it
  • 00:02:53 view X and I will move my store dot J's
  • 00:02:58 file in there that did not really
  • 00:03:00 shorten the file though but I will also
  • 00:03:03 create some other files here one for the
  • 00:03:06 Gators one for D mutations and one for
  • 00:03:12 you guessed it the actions now with
  • 00:03:16 these extra files what I do is in the
  • 00:03:20 actions file for example here first of
  • 00:03:24 all I exported efj old object and then I
  • 00:03:28 will go to my store the chess file to my
  • 00:03:30 actions and simply copy that method or
  • 00:03:34 all the methods I have there and put
  • 00:03:36 them as methods into this object them
  • 00:03:38 exporting in this file and then I can
  • 00:03:41 simply go into the store dot J's file
  • 00:03:43 and import actions from my actions file
  • 00:03:50 this actions object and I simply assign
  • 00:03:53 it as a value to my actions property
  • 00:03:56 down there or use es6 to automatically
  • 00:03:59 assign it since it has the same name now
  • 00:04:02 I will do the same for the mutations so
  • 00:04:04 I will grab the whole mutations object
  • 00:04:07 here actually go to the mutations J's
  • 00:04:10 file export the default object here to
  • 00:04:12 the object I just wrapped and go to the
  • 00:04:15 store J's file to now import the
  • 00:04:18 mutations there and I will assign them
  • 00:04:21 to the mutations property or again use
  • 00:04:23 es6 since the name is the same and I'll
  • 00:04:26 do this say
  • 00:04:27 for the gathers export default object
  • 00:04:33 that one year import the gathers in the
  • 00:04:36 store dot JS file and assign them here
  • 00:04:40 again using es6 as a shortcut and with
  • 00:04:43 that distorted chase files much leaner
  • 00:04:45 now the app would be broken though
  • 00:04:47 because all the moved distorted shares
  • 00:04:49 file so make sure to adjust the import
  • 00:04:51 in the main dot JS file to and with that
  • 00:04:54 if I save this and go to the application
  • 00:04:57 reload it looks like it's working again
  • 00:05:02 but now the store the chair's file is
  • 00:05:04 leaner and i outsource this in two
  • 00:05:06 different files mutation scatters and so
  • 00:05:09 on and with that you should be set to
  • 00:05:12 use view x and really improve your
  • 00:05:14 applications with that i hope to see you
  • 00:05:17 in other videos have a great day bye