In today’s episode, we talk with special guest Sanchitha SR about her article titled How to Communicate between Components in Vue.js.  We cover the five ways that we can send data from one component to another: 

Links

Steve_Edwards: 

Hello everybody and welcome to yet another exciting episode of Views on View. I am Steve Edwards, the host with the face for radio and the voice for being a mime, but I'm still your host. And today I'm flying solo on the panel and I have a guest with me, Sonchita SR. I think I said that right. Did I get it right?

 

Sanchitha_Sr: 

Yes. Yes, that's right. 

 

Steve_Edwards: 

Yes I did. All right. Good, good. We're off on the good foot then. Today we're here to talk about communication between components in Vue. But before we get started, Santita, if you can tell us about yourself, who you are, why you're famous, your development experience, so on.

 

Sanchitha_Sr: 

Sure. Hello. Thank you for having me on the show. Hi. My name is Anshita and I've been software developer from five plus years and I've been working on Vue from two, two and a half years. I'm from India and I just moved to Australia. I live here now. Australia

 

Steve_Edwards: 

Australia so tell everybody what time it is right now for you in Australia

 

Sanchitha_Sr: 

Oh, it's 4 AM right now, 

 

Steve_Edwards: 

is very cool yes no one i tends to be that way as that's dedication we appreciate that of our guests meanwhile it's the middle of the morning for me so i'm perfectly fine so uh... sent you know it looks like you have a blog on medium under name sent you to s are uh... and one of the post i guess i caught our attention is how to communicate between components in you j s uh...

 

Sanchitha_Sr: 

Yes. Yeah, when I wrote this, it was on Vue 2, but a lot has changed.

 

Steve_Edwards: 

Okay.

 

Sanchitha_Sr: 

after view 3 was released.

 

Steve_Edwards: 

Yeah, for sure there's a lot changed with View 3. Granted, View 2 isn't going away anytime soon. I'm sure there are many many sites out there and applications using View 2 and will be for a long time. So the importance of this certainly isn't going away anytime soon.

 

Sanchitha_Sr: 

this certainly isn't going away anytime soon. Yeah, let's do. So let's move through the post here and talk about the five ways that you have listed. Number one, we have props. How do props work? So when we consider communication between the components, it is important to understand the relationship between them.

 

Steve_Edwards: 

So let's move through the post here and talk about the five ways that you have listed. So number one, we have props. So how do props work?

 

Sanchitha_Sr: 

So we have parent to child and child to parent and communication between any components that is sibling components. So prop is kind of parent to child communication where you know we define props in the child component and we kind of inject it in the child, as in parent.

 

Steve_Edwards: 

Right, so in the child we basically say, okay, these are the props that I'm expecting coming from whatever parent has included me, right? Could be a name, could be a string, an object, an array, a number, a Boolean, whatever, right?

 

Sanchitha_Sr: 

So in the child, we basically say, OK, these are the props that I'm expecting coming.

 

Sanchitha_Sr: 

could be a name, could be a string, an object, an array, a number, a Boolean, whatever, right? Yes, it's just that we need to define it in the child component that we are sending a string or an array or something like that and, you know, put a value so that, yeah, it is captured in the parent component. Exactly. Now, for those...

 

Steve_Edwards: 

Exactly. Now for those who might not be familiar with props, when you're sending props from the parent, you know, you're basically just adding the prop as an attribute on the child component, that element that you have in your template. You can send either dynamic or fixed value values, right? So if you're, you know, you might always want to

 

Sanchitha_Sr: 

sending props from the parents, you're basically just adding the prop as an attribute.

 

Sanchitha_Sr: 

you can send either dynamic or fixed value values. So if you're, you might always want to, in this implementation of a child component, you might always want the title to be a certain thing. So that would just be, attribute, prop name equals whatever. But you can also use a dynamic prop so that the prop that's passed to the child varies depending upon,

 

Steve_Edwards: 

you know, in this implementation of a child component, you might always want the title to be a certain thing, right? So that would just be, you know, attribute, you know, prop name equals whatever. But you can also use a dynamic prop so that the prop that's passed to the child varies depending upon, you know, a variable value. And so in that case, you'd want to use the V bind or the colon syntax, right?

 

Sanchitha_Sr: 

variable value. So in that case you want to use the D bind or the colon syntax. Yes. Also...

 

Steve_Edwards: 

tells Vue that the prop is going to change depending on the use.

 

Sanchitha_Sr: 

Yeah, one more thing I wanted to mention, this method is reactive, as in child component updates automatically whenever the parent data changes.

 

Steve_Edwards: 

Okay, say that again. So if you updated in the child.

 

Sanchitha_Sr: 

Say that again, so if you update it in the child? Yeah, and the parent, you know, the, you know, if we are updating message in the child, you know, the data in the parent updates automatically.

 

Steve_Edwards: 

Okay, give me an example, because that's... doesn't sound right to me. Maybe I'm wrong. Can you give me an example?

 

Sanchitha_Sr: 

Okay, give me an example.

 

Sanchitha_Sr: 

So if we if you are initializing just say a number in child component and it is getting rendered in the parent and when you know when this number changes it is automatically reflected in the parent.

 

Steve_Edwards: 

Mm-hmm.

 

Sanchitha_Sr: 

Don't you don't need events or like scope slots to handle something like that? No, that's what reactivity means

 

Steve_Edwards: 

You don't need vents or like scope slots to handle something like that.

 

Steve_Edwards: 

Okay, so let's talk about along the same lines how you would communicate from the child to the parent.

 

Sanchitha_Sr: 

communicate from the child to the parent? Yeah, that is using event. It kind of is similar to props, where parent to child communication used to happen. And in events, we are communicating from child to parent, except that we are using V on directive for capturing the event. And when you...

 

Steve_Edwards: 

Mm-hmm.

 

Sanchitha_Sr: 

When you want to fire an event, you just mention this.emit and name of the event. We can even send the arguments. This is captured on the parent component using V on directive. It's just that we have to use the same event name while capturing and while sending the event.

 

Steve_Edwards: 

Right, so in your child, you would say this emits, you know, you could say my custom event and then pass a value of what the number is. And then in your parent component, you would have a handler, some sort of handler that says, okay, whenever I get this event, do this, right? You can assign a method or something like that and then do what you want from there. I think, you know, there's your native events on a lot of things like at click or.

 

Sanchitha_Sr: 

So in your child you would say this and this, you know, you could say my custom event.

 

Sanchitha_Sr: 

Yes. You would have a handler, some sort of handler that says, okay, whenever I get this event, do this, right? Exactly.

 

Sanchitha_Sr: 

I think there's your native events on a lot of things like at click or at input, at change, and stuff like that. And then the nice thing is you can also do your own custom events, call it whatever you want. Yes. Pass whatever you want and handle it however you want. So just important to say that it's different communication methods from parent to child versus child to parent. Yeah. And then the benefit of the events is that

 

Steve_Edwards: 

at input, at change, and stuff like that. And then the nice thing is you can also do your own custom events, call it whatever you want, pass whatever you want, and then handle it however you want. So just important to say that it's different communication methods from parent to child versus child to parent. And then the benefit of the events is that you can actually listen in more than one component.

 

Sanchitha_Sr: 

you can actually listen in more than one component. You know, you could have multiple parents that implement the same child. It's just something very common, you know, say something like a layout where you have a main page and then you have a navbar component with different items and the items may vary, but in your navbar, you could listen to the events coming from the child.

 

Steve_Edwards: 

You could have multiple parents that implement the same child. There's something very common, say something like a layout where you have a main page and then you have a navbar component with different items and the items may vary, but in your navbar you could listen to the events coming from the child, whatever child is implemented.

 

Sanchitha_Sr: 

Yeah, I think this is very helpful when we have a component library where we are you know defining our own components with with its own style. We can just pass the props and events back and forth so that you know it is very easy to handle.

 

Steve_Edwards: 

Alright, so where are we at? Number three, event bus. Now, this is one that's, you know, it's available and I know I can remember when I was first learning Vue. It was one I looked at and studied but it's, I'm going to guess it's probably one of the least used ways to communicate between components, whether it's sibling, child, parent, whatever. Do you think, do you agree or have you seen it used?

 

Sanchitha_Sr: 

So where we at number three event bus now you list this is one that's you know, it's available

 

Sanchitha_Sr: 

that and studied, but I'm going to guess it's probably one of the least used ways to communicate between.

 

Sanchitha_Sr: 

Yes, I think this is used way less. Yeah, like I said, it's kind of a dirty way to communicate between components. I think I'd rather use other methods. But yeah, when we have a very small application, and we just need to send, you know, very

 

Sanchitha_Sr: 

just an id or just a string and nothing else. Yeah, we can use this. But this method I have mentioned in my blog, it is only limited to view2. This is duplicated in view3. We need to use an external library called mid.js or tiny emitter in view3 to use.

 

Steve_Edwards: 

Right.

 

Sanchitha_Sr: 

you know, do the sibling communication between the components.

 

Steve_Edwards: 

Right, so yeah, there's a separate library, MITT.js, that is, I was looking at it and I forgot what it was. Oh yeah, sort of an event emitter, basically, if I'm reading it correctly. Yeah, it's MITS and then a pub subtype model, so hey, whenever somebody emits this event, do whatever.

 

Sanchitha_Sr: 

yeah there's a separate library MITT.js, MIT.js that is.

 

Sanchitha_Sr: 

Oh yeah, sort of an event emitter, basically, if I'm reading.

 

Sanchitha_Sr: 

and then a PubSub type model. So, hey, whenever somebody admits this event, do whatever. Yeah. All right, so number four. Now, I found this one interesting. It's using Provide Inject.

 

Steve_Edwards: 

Alright, so number four. Now I found this one interesting. It's using the provide inject method, but my awareness was that it was only available in view three, but you told me ahead of time that you actually got this to work in view two, correct?

 

Sanchitha_Sr: 

but you told me ahead of time that you actually got this to work in Vue 2, correct? Yes, even I was not aware that it did not work in Vue 3, but yeah, when I was writing this blog, I worked with Vue 2, so I guess yeah, it works here. So this is like a parent to child communication, but we can also say it as, you know, grandparents to child communication.

 

Sanchitha_Sr: 

So, uh...

 

Steve_Edwards: 

So how does it work? Can you go and give a quick explanation of how Provide Inject works?

 

Sanchitha_Sr: 

Yeah, so in parent component you specify provide and say you return, you know, provide and you return a variable. Just imagine we are sending a text and in the child component you just, you know, you just get it as, get it in inject.

 

Sanchitha_Sr: 

using the same variable name here.

 

Steve_Edwards: 

Okay, right. So you're defining it, now provide is basically a method, but it's at the root level of the object, the defaulted view object, right? So it's not under methods or components or something like that, it's at the same level as where you would put your hooks, for instance, your lifecycle hooks.

 

Sanchitha_Sr: 

a method but it's at the end.

 

Sanchitha_Sr: 

Yeah. So it's not under methods or components or something like that. It's at the same level as where you would put your. Yeah. So it's not under methods or components or something like that. It's at the same level as where you would put your. Yeah.

 

Sanchitha_Sr: 

Yes.

 

Steve_Edwards: 

right. So it's this method and then it returns whatever it is you want to send to your child and what you want to inject into your child. Now since it's a method is there a way you can call it or you can like pass in parameters or is it you just sort of a standalone method and you have to inside it calculate what it is you want to send to your child component.

 

Sanchitha_Sr: 

So it's this method.

 

Sanchitha_Sr: 

Now, since it's a method, is there a way you can call it or you can like pass in parameters or is it sort of a stand alone method and you have to inside it calculate what it is you want to send to your child?

 

Sanchitha_Sr: 

I don't think it's kind of a method. We just specify inside a, you know, inside like provide and yeah, you can just get it with inject in the child component. Right, so inject, if I'm reading this correctly, is sort of like crops. It's that, it's an array of expected values that are

 

Steve_Edwards: 

Mm-hmm.

 

Steve_Edwards: 

Right. So inject, if I'm reading this correctly, is sort of like props. It's that it's an array of expected values that are being returned from provide. Is that correct?

 

Sanchitha_Sr: 

Yeah, except that parent component is considered as a provider and injected into the child component. It's like dependency injection that we have in Angular.

 

Steve_Edwards: 

Right, or PHP, yeah, there's any number of languages that use that paradigm for sure. But in the child, you're basically saying, okay, what I'm injecting is these values that I'm expecting from provide. So it's not a method, it's just an array, it looks like.

 

Sanchitha_Sr: 

Yeah. But in the child, you're basically saying, OK, what I'm injecting is these values that I'm expecting from Provide. Yes. It's not a method, it's just...

 

Sanchitha_Sr: 

Yeah, this this method is really helpful when we have very, you know, deeply nested components. This has an advantage over prop because say you have, you know, nested components, which has three layers. So in in case of props, you have to send the prop, you know,

 

Steve_Edwards: 

Uh huh.

 

Sanchitha_Sr: 

down by, you know, you have to write it for three levels, which can be very confusing and you know, it doesn't look very good, but using Provide and Inject, you can send the data to any component and it doesn't matter how deeply nested it is.

 

Steve_Edwards: 

All right.

 

Steve_Edwards: 

So it's almost like using provide makes something globally available. Is that accurate? Interesting. So then it's out there and available for any child component to use.

 

Sanchitha_Sr: 

yes something like that yeah

 

Sanchitha_Sr: 

Yes, if you just specify a variable inside provide, we can use it in any child component, no matter how deeply nested it is.

 

Steve_Edwards: 

Hmm, interesting, okay. And then your fifth option is using refs for parent-to-child communication.

 

Sanchitha_Sr: 

and then your fifth.

 

Sanchitha_Sr: 

Yes, this is something like we can just assign reference ID to the child component using ref attribute and from parent component we can just get it as this.ref.component name, you know, reference ID so that we get all the data of that component, child component and we can use it.

 

Steve_Edwards: 

Ref equals child. Okay, now I know I've used refs before when you need a way to refer to a specific element in the template section within the same component, but I hadn't used it from parent to child before.

 

Sanchitha_Sr: 

Okay, you didn't.

 

Sanchitha_Sr: 

section within the same component. Yeah.

 

Steve_Edwards: 

interesting you can use string i know i've used it is uh... methods access methods from one component in another component using rest before uh... in view to so i know that can be done for sure now all of these uh... tools or ways of communicating are she has some pretty nice clean code examples within the blog post that'll be in the show notes so

 

Sanchitha_Sr: 

And you can use string, I know I've used it as methods.

 

Sanchitha_Sr: 

access methods from one component and another component using another component.

 

Sanchitha_Sr: 

now all of these

 

Steve_Edwards: 

uh... if what i said totally confuses you then you can come here and look at at uh... the examples in here now i think you know one these are the basic examples of communicate between two components but i think it's worth addressing that these are fairly limited except maybe for provide and inject and this is when you get into a larger application you know with many

 

Sanchitha_Sr: 

the examples in here. Now, I think, you know, one, these are the basic examples of communicate between components, but I think it's worth addressing that these are fairly limited, except maybe for provide and inject. And this is when you get into a larger application, you know, with many components, hundreds of components, you know, and anything above three or four.

 

Steve_Edwards: 

anything above three or four I think is a good threshold is where you want to use something like state management, right? View X in view two.

 

Sanchitha_Sr: 

is where you want to use something like state management, right? UX, in V2. Yes, I think that's the best way. Yeah, we might need to communicate using the methods mentioned here, but yeah, as the applications go larger, I think it's better to use state management. It is easier to maintain the code.

 

Sanchitha_Sr: 

You know, it just makes everything simple in contrast to event bus or props. You know, props and, you know, events are good, but I think, yeah, state management is the most comfortable way. Yeah. I've worked in some pretty large view.

 

Steve_Edwards: 

Yeah, I've worked in some pretty large view apps, including the one I work out of my day to day. And it's interesting. They're not exclusive though, that's the thing. If you are having, you know, communicating between parent child components, which is rather common, then props work great. If you're going one level, maybe two. But once you start getting outside of that threshold, then you need view X, which...

 

Sanchitha_Sr: 

day and it's interesting it's not they're not exclusive though that's the thing if you are having you know

 

Sanchitha_Sr: 

Great.

 

Sanchitha_Sr: 

maybe two. But once you start getting outside of that threshold, then you need viewX, which the way I always envision it being the visual person is sort of a separate bucket that sits outside of your components that's accessible to all of your components. Sort of a, if you use it right and extensively enough, you can have that be your source of truth.

 

Steve_Edwards: 

The way I always envision it being the visual person is sort of a separate bucket that sits outside of your components that's accessible to all of your components. Sort of a, if you use it right and extensively enough you can have that be your source of truth. So for instance if you have component A that sits on one side of your app and then you have another component that's a few levels away or a few sibling relationships away.

 

Sanchitha_Sr: 

So for instance, if you have component A that sits on one side of your app and then you have another component that's a few levels away or a few sibling relationships away.

 

Steve_Edwards: 

you can set it up in a reactive way so that when you changed it in state or when you change it in component A, you up it automatically updates it in state which automatically updates the value for all of the other components depending upon it. So Vue X is and state management itself, React uses Redux, I'm not sure what Angular uses to be honest. It's a learning curve takes some getting used to but once you learn how to implement it and set it up.

 

Sanchitha_Sr: 

you can set it up in a reactive way so that when you change it in state or when you change it in component A, it automatically updates it in state which automatically updates the value for all of the other components depending upon it. So UX is in state management itself, you know, React uses Redux, I'm not sure what Angular uses to be honest. It's...

 

Sanchitha_Sr: 

learning curve takes some getting used to for sure now in view 3 because of the composition API

 

Steve_Edwards: 

then it's a incredibly valuable, useful tool for sure. Now in view three, I've mentioned this before. I know there are people that have written posts about how because of the composition API, there's ways you can.

 

Steve_Edwards: 

get around using Vue X and state management just using the functions and setup functions and composables but that's a topic for another day definitely a little more advanced

 

Sanchitha_Sr: 

get around using VUX and state management, just using the functions and set of functions and composables, but that's a topic for another day. Definitely a little more advanced.

 

Steve_Edwards: 

Uh, so we've covered this a little bit. I know I don't have the experience yet and you may or may not. There was a blog post on, uh, by somebody who goes by the name fatfish, uh, about seven component communications in view three. So it's a little more than the five in view two. And there's, you know, as we've mentioned before, the event bus got deprecated in view three.

 

Sanchitha_Sr: 

So we covered this a little bit. I know I don't have the experience yet, and you may or may not. There was a blog post by somebody who goes by the name Fatfish about seven component communications in view three. So it's a little more than the five in view two. And there's, as we mentioned before, the event bus got deprecated in view three.

 

Steve_Edwards: 

Even though he does list an event bus here, which is interesting. I wonder how that works if it got oh No, it is removed in view 3 Says view officially remain recommends MIT or tiny emitter For sure, so let's go through this real quick. We may not have the Experience to talk about it in detail, but we'll put this post and has some good example, right? So you still have props

 

Sanchitha_Sr: 

No, he does list an event bus here, which is interesting.

 

Sanchitha_Sr: 

Oh no, it is removing V3. Yes. It says VU officially remaining, recommends mitt or tiny emitter.

 

Sanchitha_Sr: 

So let's go through this real quick. We may not have the experience to talk about it in detail, but we'll put this close and have some good examples. So you still have props. Still pass directly from a child to a parent. Or excuse me, parent to child. Parent to child, yeah. This code is definitely a little different.

 

Steve_Edwards: 

Right? Still pass directly from a child to a parent. Or excuse me, parent to child. Sorry. Right. This code is definitely a little different. Can you talk about that? I'm looking at the code, trying to remember.

 

Can you talk about that? I'm looking at the code.

 

Sanchitha_Sr: 

So yeah, they have done something from the parent to child communication where you know she has mentioned a list and she is rendering that list using UL and Li elements which is being injected from the child component using prop.

 

using parent component using props here. And then in your now in view two in your child component that's receiving the props, you would just have a props object and then you would define your list of object list of expected values, which could be either single values or an object with various things.

 

Steve_Edwards: 

And then in your now in view two in your child component that's receiving the props You would just have a props object and then you would define your list of objects lift a list of expected values Which could be either single values or an object with various things to define like whether it's required or default values and stuff In view three you use a defined props method it looks like

 

Sanchitha_Sr: 

In view 3 you use a defined props method it looks like.

 

Steve_Edwards: 

And you're basically just passing an object that lists the different props. So nothing incredibly huge, just a slightly different syntax for defining those props.

 

Sanchitha_Sr: 

and you're basically just passing an object that lists a different improv. So nothing incredibly huge. Just a slightly different syntax for defining.

 

Sanchitha_Sr: 

Yeah and you know she has used emit I think that is similar to what we have in view 2. Yeah we just have to you know she has just triggered the event called handle add and has captured from parent using vyond directive.

 

Steve_Edwards: 

Right, so your method is, let's see, I'm reading through this here.

 

Sanchitha_Sr: 

so your method

 

Steve_Edwards: 

Oh, when you click it emits your event and then you define that as a const in your setup function. Oh, instead of this emit, it's emits, like there's a method emits and then your name and the values that you want to pass. So again, pretty similar structure, just slightly different syntax for how you're emitting your events.

 

Sanchitha_Sr: 

click it, it emits your event and then you define that as a const in your setup function. Instead of this emit, it emits, like those methods, it emits your name and the values that you want to pass. Again, pretty similar structure, just slightly different syntax for how you're emitting your events.

 

Sanchitha_Sr: 

Yes, and there's a third method, VModel, even I was not sure how it works, but it seems similar to using props and Emmet.

 

Steve_Edwards: 

Yeah, so sort of a two-way data binding between the two.

 

Sanchitha_Sr: 

Yeah, so sort of a two-way data binding between the two. Yeah, between the two components.

 

Steve_Edwards: 

Yeah, V-Model is still the same. It's, what is it? It encompasses two different basic attributes. What's it? I forget what they are and I should know this. It's handling the change event and then the binding to the data value or it's handling a couple of things.

 

Sanchitha_Sr: 

Yeah, V-Model is still the same.

 

Sanchitha_Sr: 

two-way binding.

 

Sanchitha_Sr: 

I don't know if you get what they are and I should know this. It's handling the change event and then the binding to the data value. Or it's handling a couple things.

 

Sanchitha_Sr: 

Yeah, and refs is similar to view2. Nothing, you know, no differences as such.

 

Steve_Edwards: 

Okay, now refs. Now we talked about using refs in Vue 2.

 

Sanchitha_Sr: 

Okay, now refs. Now we talked about using refs in YouTube.

 

Steve_Edwards: 

you have to basically define a ref object and then you pass that so again slightly different little more defined uh... syntax where you have to actually define a ref object and just set of saying this ref something equals whatever

 

Sanchitha_Sr: 

you have to basically define a ref object. Yeah. And then you pass that. So again, slightly different, a little more defined syntax where you have to actually define a ref object and just set it saying this ref something equals whatever. Exactly. And even provide and inject looks the same. We don't have much difference between view two and view three.

 

Steve_Edwards: 

Mm-hmm.

 

Steve_Edwards: 

Right. Yeah, I mean with Vue 3, I mean, one of the big things that I've noticed, and this is specifically done, is you're not referring to this so much anymore. For instance, this in Vue 2 with the child component, you do a this.$emit to use that global capability and then whatever. And that's how you would impact Vue X. This $store.

 

Sanchitha_Sr: 

yeah

 

Sanchitha_Sr: 

that global capability and then whatever and that's how you impact UX this dollar store various other things in this case this is gone and all the dollars

 

Steve_Edwards: 

various other things in this case this is gone and all the dollar sign labels are gone and now you're just using provide and omits inject methods that you import with destructuring from view itself and then just use them so some definite syntax change there.

 

Sanchitha_Sr: 

that you import with destructuring from view itself.

 

Sanchitha_Sr: 

Yes.

 

Sanchitha_Sr: 

And yeah, we were discussing about event bus. Yeah, like I said, it is deprecated in view three. So in view two, we used view instance as a central bus event and we emitted, if you want to send the data from component one, we use this $sign2.emit.

 

Steve_Edwards: 

Sorry, go ahead.

 

Steve_Edwards: 

Mm-hmm.

 

Steve_Edwards: 

Mm-hmm.

 

Sanchitha_Sr: 

to capture it we use this $root.on since we don't have that here we Yeah, we just have to You know use libraries called MITT.js so yeah in in that in case of MITT.js it just Yeah, it just creates an instance so that so that we can send the

 

Sanchitha_Sr: 

if we can send the event similarly.

 

Steve_Edwards: 

Right. So the interesting thing with moving on to Vuex, you know, Vuex itself is still available in Vue 3 and is a core thing, but there have been some other options that have been created, other libraries for handling state management in Vue 3. One of them is Pina, P-I-N-I-A. And I know we interviewed somebody who manages or uses Pina.

 

Sanchitha_Sr: 

So the interesting thing with moving on to Vue X, you know, Vue X itself is still available on Vue 3 as a core thing, but there have been some other.

 

Sanchitha_Sr: 

created other libraries for handling state management in V3. One of them is PINIA. And I know we interviewed somebody who manages PINIA.

 

Steve_Edwards: 

what a while ago and hopefully maybe I can find that episode and link to it but there are other options out there besides VUX for sure which I think is awesome. Oh Harlem is another one Harlem is the other one and I think we've talked to somebody there too so at least three different options for state management with VUX and I think the goal with any of them is just to be

 

Sanchitha_Sr: 

so I didn't link to it.

 

Sanchitha_Sr: 

the other one.

 

Sanchitha_Sr: 

So at least three different options for state management with UX. And I think the goal with any of them is just to be a little more intuitive in how it's written and how it's managed with not quite so much boilerplate needed whenever you need to be state management. We'll throw some links in the show notes to those libraries. Yeah, I have never used Pinyo. I think this is the first time.

 

Steve_Edwards: 

a little more intuitive in how it's written and how it's managed with not quite so much boilerplate needed whenever you need to do state management. But we'll throw some links in the show notes to those libraries.

 

Sanchitha_Sr: 

are hearing that state management tool. Yeah, I think it's worth trying.

 

Steve_Edwards: 

Yeah, yeah, they definitely look, like I said, they look to be a little more easier to use, a little more intuitive, but I can't really speak to, speak to using them, so I haven't had the chance to use them yet.

 

Sanchitha_Sr: 

I'm not big to using mFly and everything, so I'm using it.

 

Steve_Edwards: 

So, all right, so is there anything we missed that you wanted to bring up talking about communication between view components?

 

Sanchitha_Sr: 

So is there anything we missed that you wanted to bring up talking about communication between view components? Yeah, I think that's that's pretty much it Also, you know, I have one question That I don't understand so for in provide or inject they say

 

Steve_Edwards: 

Okay.

 

Sanchitha_Sr: 

you know that method is not reactive although I haven't got a chance to explore how it's not reactive so that that might be something I need to look at.

 

Steve_Edwards: 

Yeah, I haven't had a chance to use Provide Inject myself, so off the top of my head, I can't answer that. Something to look at for sure for those who are interested in pursuing that a little more.

 

Sanchitha_Sr: 

something to look at for sure. Yeah.

 

Sanchitha_Sr: 

Yes. All right. So with that, we will move on to picks.

 

Steve_Edwards: 

All right, so with that, we will move on to picks. Picks are part of the show that we get to talk about things other than code or view or JavaScript, something that might interest us. I don't have any particular topic or thing other than my usual dad jokes. And I know that my dad jokes are always the high point of any of my podcasts.

 

Sanchitha_Sr: 

other than code.

 

Sanchitha_Sr: 

interest us

 

Steve_Edwards: 

I think some people would disagree, but that's okay. I'm the one telling them. So for today, so you know a common thing in sports games that you'll see a lot of times, particularly in professional sports, is if someone scores a you know scores or the end of a game or something, they'll generally throw a ball into the crowd. And so I was

 

Sanchitha_Sr: 

I agree, but that's okay. I'm the one telling them. So...

 

Sanchitha_Sr: 

day.

 

Sanchitha_Sr: 

So, you know, a common thing in sports games that you'll see a lot of times, particularly in professional sports, is if someone scores a score at the end of a game or something, they'll generally throw a ball into the crowd. And so I was playing some sports the other day, and after I won the game, I decided to do the same thing and throw my ball into the crowd. But apparently that's frowned upon in bowling.

 

Steve_Edwards: 

Playing some sports the other day after I won the game. I had decided to do the same thing and throw my ball into the crowd But apparently that's frowned upon in bowling

 

Steve_Edwards: 

Thank you. So I have a friend who got a dog and he named his dog Five Miles. And he figured that way every day he could tell people that he walked five miles. You know, he walked the dog. Well, unfortunately today he ran over five miles.

 

Sanchitha_Sr: 

I think they are pretty great. They are not bad jokes.

 

Sanchitha_Sr: 

and he named his dog five miles. And he figured that way, every day he could tell people that he walked five miles.

 

Sanchitha_Sr: 

today he ran over five miles. Yeah, that was a good one.

 

Steve_Edwards: 

And then finally, unfortunately, myself, my kids, my parents, my brothers, we all have problems with terrible diarrhea. You could say it runs in the family.

 

Sanchitha_Sr: 

myself, my kids.

 

Sanchitha_Sr: 

We all have problems with terrible diarrhea. You could say it runs in the family. A little death cross, yeah, I know, but it's so good. It's a little laugh. So do you have any pics you wanna share with us, Sanchita? Yes, I wanna talk about a show I watched recently. It's called Normal People. Normal People. Yeah. That is actually

 

Steve_Edwards: 

Oh, that's gross. Yeah, I know. But it's still good. It makes people laugh. So do you have any pics you want to share with us, Sajita?

 

Steve_Edwards: 

normal people.

 

Sanchitha_Sr: 

book adaptation of Sally Rooney's novel called Normal People. So Sally Rooney is an Irish author. She, yeah, she writes pretty good books. So yeah, this was good. It was lit.

 

Steve_Edwards: 

Yeah, it looks like it's a Hulu show, so it's available on Hulu. Am I reading that correctly?

 

Sanchitha_Sr: 

Yeah.

 

Steve_Edwards: 

Okay. Uh, so she likes romantic psychological dramas. At least that's what this one is categorized at. Normal people.

 

Sanchitha_Sr: 

She likes romantic psychological dramas. At least that's what this one is categorized as. I don't know if it was psychological drama, but yeah, it was good. Also, there's one more show called Conversations with Friends that's also, you know, it's her book. And they haven't made a show. Even that is pretty good.

 

Steve_Edwards: 

Okay, yes, Sally. Sorry, what was her name? Sally Rooney? Is that right?

 

Sanchitha_Sr: 

Oh, okay, yes. Sally... What was her name? Sally Moon? Yeah.

 

Steve_Edwards: 

Okay, yeah, she's Irish. Cool. So is that a Hulu show as well? Do you know?

 

Sanchitha_Sr: 

So is that a?

 

Sanchitha_Sr: 

conversations with friends. I'm not sure. Oh, was it just a book? No, they have a show, but I'm not sure if it's a Hulu show. Oh, yeah, it is on Hulu. I can see it on here.

 

Steve_Edwards: 

Right. Oh, but was it just a book?

 

Steve_Edwards: 

Oh yeah, it is on Hulu. I can see it on here.

 

Steve_Edwards: 

Yeah, it's definitely on Hulu. So both Hulu shows, so if you subscribe to Hulu, you can see these normal people and conversations with friends.

 

Sanchitha_Sr: 

Yeah, it's definitely on Google. So both Google shows. So if you subscribe to Google, you'll see it.

 

Sanchitha_Sr: 

Yeah.

 

Steve_Edwards: 

Alright, any other picks?

 

Sanchitha_Sr: 

Any other picks? I watched a movie recently called Flavors of Youth. It's Japanese animation. It's a 1985 movie. That was pretty good.

 

Steve_Edwards: 

Flavors of Youth, it's on Netflix it looks like.

 

Sanchitha_Sr: 

Yeah.

 

Steve_Edwards: 

Ah yes, here it is in IMDB.

 

Steve_Edwards: 

Alrighty, I will make sure and put links to those in the show notes so that you too can check them out if you're interested. So if people want to talk to you or send you nice messages or communicate with you or get your autograph, what's the best way to get a hold of you?

 

Sanchitha_Sr: 

Thanks to those in the show notes.

 

Sanchitha_Sr: 

So if people want to talk to you or send you nice messages or communicate with you or get your autograph, what's the best way to get a hold of you? I'm on Twitter. My ID is SR Sanchita. And yeah, also LinkedIn. LinkedIn as Sanchita SR.

 

Steve_Edwards: 

Yeah, I have those links here. And then your blog is, medium blog is Sanchitasr.medium.com on Medium.

 

Sanchitha_Sr: 

The Medium blog is Sanchitasr.medium.com. Yes. Yeah, it looks like you have quite a number of other. Thank you.

 

Steve_Edwards: 

Yeah, it looks like you have quite a number of other articles on some JavaScript stuff, not necessarily view specific. JavaScript stuff looks good. So.

 

Sanchitha_Sr: 

Yeah, I think that's a good way to share your knowledge. It's pretty good.

 

Yes, blogging for sure. For sure it is. It's one of those things that I wish I took more time to do and I never do and then I wish I had. For sure.

 

Sanchitha_Sr: 

Yeah, it sure takes a lot of time to write a blog, but yeah, but yeah, but you end up learning a lot. So yeah, you'd be surprised how many people you think.

 

Steve_Edwards: 

It does. Good writing takes time.

 

Steve_Edwards: 

Yeah, you'd be surprised how many people you think, you know, I don't know if anybody else is gonna be interested in this. I bet I'm the only one having this problem. Then you find out, oh, this is great. I've been having this exact same problem. And that helped, so, so for sure. 

 

Sanchitha_Sr: 

interested in this. I bet I'm the only one having this problem. Then you find out, oh this is great. I've been having this exact same problem. Yeah.

 

Sanchitha_Sr: 

alrighty well thank you now that it's almost 5 o'clock am you gonna go back to bed or you gotta get up and work 

 

Steve_Edwards: 

I don't blame you, I would too. But thank you for staying up in the middle of the night to record this with us, really appreciate it and we will talk to everybody next time again on Views on View.