Coding

Vue.js + RxJS – Using vue-rx (third-party package)

  • 00:00:01 welcome to this video I do with the
  • 00:00:03 video on this channel where I show how
  • 00:00:04 to use rx shares in a view chess project
  • 00:00:08 and as you learnt there you don't need
  • 00:00:10 anything else than these two things view
  • 00:00:12 and RX shares however there is a special
  • 00:00:16 package created by the view chess
  • 00:00:18 creators which makes implementing rxjs
  • 00:00:22 or this react functionality into AB UF
  • 00:00:25 even easier I'm talking about view Rx
  • 00:00:28 and I'm on the official get up page here
  • 00:00:30 a link can be found in the video
  • 00:00:31 description now this isn't required as
  • 00:00:35 you saw in the other video but it can
  • 00:00:37 make it a bit easier to work with
  • 00:00:38 observables a bit more convenient
  • 00:00:40 actually the documentation on the scaler
  • 00:00:43 page is pretty good as is the case for
  • 00:00:45 most beauteous talks but I will still
  • 00:00:47 walk you through the basics fall back to
  • 00:00:50 this page if you want to learn more
  • 00:00:51 about it though so first of all we
  • 00:00:53 should install view rx so back in my
  • 00:00:56 project and I'm in the project which
  • 00:00:58 actually is in the mentioned last video
  • 00:01:00 you can also find a link to that in the
  • 00:01:02 video description so in this project I
  • 00:01:04 will run NPM install view rx and I'll
  • 00:01:08 add – they're safe to store an entry in
  • 00:01:10 the package store JSON file now as you
  • 00:01:12 know this will now install the package
  • 00:01:14 and we're ready to use it the first
  • 00:01:16 thing we need to do is we need to make
  • 00:01:17 view aware of this new package so in the
  • 00:01:20 main dot JS file I'll import view rx
  • 00:01:24 from view rx now I not only need that I
  • 00:01:29 also need to tell view rx what it should
  • 00:01:32 work with an observable a subject a
  • 00:01:35 couple of things and you can again
  • 00:01:36 consult your official Docs for more info
  • 00:01:38 on that I will use an observable so I
  • 00:01:41 need to import observable from rxjs
  • 00:01:46 observable and only import what you're
  • 00:01:49 planning to add to this base package so
  • 00:01:52 here I can now use view and the use
  • 00:01:55 method to add this plug-in and I will
  • 00:01:58 use view rx and at past a second
  • 00:02:01 argument here that'll be an object
  • 00:02:03 configuring this plug-in and here I
  • 00:02:06 simply pass observable now of course
  • 00:02:09 this is a JavaScript object so we should
  • 00:02:11 have key value pairs I'm using the es6
  • 00:02:14 some text where just will automatically
  • 00:02:15 be expanded to observable observable
  • 00:02:17 like this I'm just taking the shorter
  • 00:02:20 route here so what's that we do have
  • 00:02:23 viewer X configured and being aware of
  • 00:02:25 that observable object so now a view rx
  • 00:02:27 can handle things like subscriptions
  • 00:02:29 because that's part of that observable
  • 00:02:31 object I now want to use it and we can
  • 00:02:34 use it in our component just like the
  • 00:02:36 data method it's actually pretty close
  • 00:02:39 we add a new property to the Drude
  • 00:02:42 object it's called subscription as
  • 00:02:45 subscriptions excuse me and it's called
  • 00:02:48 as a method just like data is to make
  • 00:02:51 sure that each component has its own
  • 00:02:53 object therefore subscriptions returns
  • 00:02:57 and objects just like data again we can
  • 00:03:01 actually get rid of data now and instead
  • 00:03:04 in subscriptions add this count property
  • 00:03:06 which were outputting in the template
  • 00:03:07 and this time however we're not
  • 00:03:10 assigning a value like 0 we're assigning
  • 00:03:13 and observable so I can simply copy that
  • 00:03:17 code observable interval and add it here
  • 00:03:20 as a value for account please note that
  • 00:03:23 I'm not subscribing to it
  • 00:03:25 data stand by view rx that is the reason
  • 00:03:28 why we made it aware of how observables
  • 00:03:31 work by passing it here so that it knows
  • 00:03:33 how to subscribe and it will obscure
  • 00:03:36 I've automatically so right now count
  • 00:03:39 without put this incrementing number and
  • 00:03:41 I can prove this by commenting out
  • 00:03:42 everything in the created method and
  • 00:03:44 running our development server with NPM
  • 00:03:47 run death make sure that you still have
  • 00:03:49 that observable import here though
  • 00:03:50 because even though you did add it in
  • 00:03:52 main dot j s that is only for the view
  • 00:03:55 RX plugin to be aware of it we are using
  • 00:03:58 it here q here so if we use a certain
  • 00:04:01 object we need to have it available in
  • 00:04:03 that file where we use it so we need to
  • 00:04:06 import it here otherwise Java Script
  • 00:04:07 won't find it so with that and the
  • 00:04:10 development server started let's go back
  • 00:04:13 to our view rx application and there you
  • 00:04:17 will see that indeed we have our
  • 00:04:19 incrementing number and the nice thing
  • 00:04:21 is we're using this like data we simply
  • 00:04:24 set up our property without putting this
  • 00:04:26 property in the template and we simply
  • 00:04:28 find a reactive value and observable
  • 00:04:31 instead of our hard-coded or a
  • 00:04:32 synchronous value like a number that is
  • 00:04:35 pretty cool of course we're not limited
  • 00:04:38 to that we can still use our filter here
  • 00:04:40 so I can simply copy that filter and
  • 00:04:44 chain it also chain it the new line of
  • 00:04:46 course make sure that you all the import
  • 00:04:49 filter as you do with interval because
  • 00:04:52 we're still using it and s tile that's
  • 00:04:54 important and once that I can also get
  • 00:04:56 rid of created because I'm not using it
  • 00:04:58 anymore and now if I hit save and go
  • 00:05:00 back to my application reload it you see
  • 00:05:03 we start at zero then we see two then we
  • 00:05:06 will see four and six only the even
  • 00:05:09 numbers so the same functionality as in
  • 00:05:12 my other video but now achieved with the
  • 00:05:14 viewer X package which automatically
  • 00:05:16 subscribes now the viewer X package
  • 00:05:19 offers a bit more features than just
  • 00:05:21 that though that is one of the most
  • 00:05:22 important features if you want to see
  • 00:05:25 more let me know I hope this was helpful
  • 00:05:27 and if you want to type people right now
  • 00:05:29 have a look at the official Docs for
  • 00:05:30 that urx package also link in the video
  • 00:05:33 description which are Bridget rate on
  • 00:05:35 the github page these talks I mean so
  • 00:05:37 have a great day bye