Name: Building Pinia From Scratch
Uploaded: 2024-04-22T12:00:00.000Z
Duration: 1 h 10 min 1 s
Description: Let's dive into how Pinia works under the hood by building our own `defineStore()`. During this workshop we will cover some advanced Vue concepts like dependency Injection and effect scopes. It will give you a better understanding of Vue.js Composition API and Pinia. Requirements: experience building applications with Vue and its Composition API.

Doing a refReactive, or do you want, or maybe you want an explanation on why does this work? So, the way these work, they both are reactive in the sense for a ref, you also need the dot value. You can do that refReactive this way. No, you cannot, because reactive only works on objects. And this is part of how <a href="/tags/reactivity">reactivity</a> works in <a href="/tags/vue-3">Vue</a>. You need, so, the way <a href="/tags/vue-3">Vue</a> tracks <a href="/tags/reactivity">reactivity</a> is through the access of properties. Primitives, so, numbers, booleans, strings, there is no way to track the read of them, and they cannot be changed. You can only create new versions of it. They are immutable in <a href="/tags/javascript">JavaScript</a>. So, reactive allows you to have an object that is reactive. And because it only works on objects, it removes the need of writing to value. But it also removes the possibility of replacing the whole value as a whole. Now, the reason this works is not specific to reactive. It also works with ref. But, of course, with ref, you also need to do a value. Now, what do I mean by it also works with ref? It's because what we are seeing is what we call unwrapping. Let me see. Referent wrapping is probably the best one here. I think it's here. So, if you put a ref or anything, a computed also, if you put it inside of a reactive or a ref, when you try to access it, <a href="/tags/vue-3">Vue</a> will automatically unwrap that value, so you don't have to write it. This is because it can track the read of it. Now, there are ways to get out of that with some Mark row and shallow ref or shallow reactive. They allow you to not have the unwrapping behavior. But it gets a bit more complex. Most of the time in most applications, you don't need to do that. And so, just behind the scenes, PNIA, what does is use reactive for all of the stores. All of the stores are wrapped with reactive and therefore you don't have to write the dot value and everything. So, is store refs store similar to wrapping or stores in reactive? No. It's actually the opposite direction. So, store to refs is really just a wrapper, a rewrite. It's like a PNIA specific version of refs. So, we have two functions. We have two refs and two refs with an S. So, two refs allows us to oops, ended up taking the wrong one. It allows us to take one reactive object, and so, in this, I really mean reactive object. So, it not only means an object created with reactive, but it also works with an object created with ref. Now, this is going deep into the rabbit hole of <a href="/tags/reactivity">reactivity</a> of <a href="/tags/vue-3">Vue</a>, but it allows you to extract a property of that object while keeping <a href="/tags/reactivity">reactivity</a>. So, in order to extract a property from an object, since you don't know what that property can be, can be a number, can be an object, a ref is the only thing that it can be converted to. So, if I do here count, so I'm extracting count again, okay? I can change that if I want, and they are all connected to the same value. I only have one count ref, yet I have three ways of accessing it here. So, Renato is saying you mean with constore equals reactive name ref Renato, I can do store.name equals Eduardo, and it will still be reactive. Yes, totally. I'm going to copy that just to show it. It will be easier for anybody not having the chat to follow. If you have a reactive with a ref inside, you can totally do that, and it's still reactive. So, Daniel is saying that's what I meant by doing a ref reactive. Okay. Yeah, it just sounds weird because reactive is such a common word, and especially in the context of the <a href="/tags/reactivity">reactivity</a> API, but both ref and reactive create reactive objects, right? It's just that reactive is called reactive. But both create reactive objects. So, Nikita is saying, could you explain again why double gets broken when the scope is disposed but not count? So, it's not that count, both get broken, okay? It's not that count doesn't get broken. It's just that it looks like it's working because what is the exact reason? It's because we're doing some interaction that triggers <a href="/tags/vue-3">Vue</a> to re-render, and so it will show the updated version.

But the other one, the computed is actually has a cached version of the value, and the function instead of the computed is never re-executed again. So, that's why no matter how many times you try to re-render, you always get the old version of the computed property. But the ref, even though it's not reactive anymore, it still changes. It's still a container of a value, and that value is still changing. So, if <a href="/tags/vue-3">Vue</a> re-renders, it will re-render the new version of that property. And the problem is that it's re-rendering, I don't know for what reason exactly, but it re-renders and nothing changed. I mean, nothing was, nothing reactive changed. Does that make sense? Or you want me to re-go through it in another way? It's difficult to, a bit difficult to show, but let me show you another example.If you have a property that is not reactive, so, just a let statement. And I'm gonna do set interval a equals new date. No, I need to do, let's do one second, what did I do? New date. Probably need to reload the page just in case. All right. So, this interval is triggering every second. And it's changing a property that is not reactive. So, if I go here, and I put it here, I have the date. So, today and the time. Now, this value should be changing every second, but it's not. Now, if I change anything else, it's going to update. So, it's not that the value is now suddenly reactive. It's just that <a href="/tags/vue-3">Vue</a> is re-rendering the template and is reading the value again. The same thing happens with a ref that is not reactive anymore, that is disposed. If you use it in a watcher, it's not gonna trigger anymore. But if you try to render its value, since the value still changes, because it's just an object in <a href="/tags/javascript">JavaScript</a>, well, you get a new value, you get the latest value every time you render. But if you use a watcher on the ref, it doesn't work. And the computer is actually pretty much the same as a watcher, right? So, because the ref is not reactive anymore and the computer is not even trying to watch anything anymore, it doesn't recompute the value anymore. So, it always stays with the old value as a cache. Okay. I'm glad that worked for you.But specifically because we're not creating a new ref, so that's important too. View mounts the component, but the component is doing useStore, and so useStore is skipping the creation of the store, and it's using the one from before. And if the fx scope is not detached, so without this or false, then, yeah, the ref is not recreated. We reuse a ref, but the ref was already disposed of automatically by the unmounted. We can achieve the same bug if we force it by extracting the ref from the component somehow, like passing to a function and catching it outside of the component. It's a bit of a hack if we try to do that. That's what we really try to say all the time. If you have a composable, if you have something that starts with use, it should always be used inside of setup, because otherwise you're going to have weird things that might not be expected. And so these weird cases, these weird edge cases, sometimes need to be fixed, and that's when you come to the, I mean, that's when fx scope comes to the rescue, because it allows us to really have that extract version of the API that is not connected to any component.

So, it's like let count equals ref zero, but when view remounts the component, it's doing count equals ref again. And then every reference to the first one, like the computer, will not be tracking it anymore. Yes. But specifically, but specifically because we're not creating a new ref, so that's important too. View mounts the component, but the component is doing useStore, and so useStore is skipping the creation of the store, and it's using the one from before. And if the fx scope is not detached, so without this or false, then, yeah, the ref is not recreated. We reuse a ref, but the ref was already disposed of automatically by the unmounted. We can achieve the same bug if we force it by extracting the ref from the component somehow, like passing to a function and catching it outside of the component. It's a bit of a hack if we try to do that. That's what we really try to say all the time. If you have a composable, if you have something that starts with use, it should always be used inside of setup, because otherwise you're going to have weird things that might not be expected. And so these weird cases, these weird edge cases, sometimes need to be fixed, and that's when you come to the, I mean, that's when fx scope comes to the rescue, because it allows us to really have that extract version of the API that is not connected to any component. It's completely on the side of the component tree, and Pina uses this, by the way.Okay. I think it's time to show the platform. So, in the platform, there are a few folders. Okay? We have a <a href="/tags/code">code</a> theory, which is what I'm talking about right now. There is a read me, a license, blah, blah, blah. What is important is the <a href="/tags/code">code</a>. The <a href="/tags/code">code</a> has, is it going to show too many things? It has a lot of files, but the interesting files for us are all in the exercise folder. What I recommend you do is open these folders specifically, and not the root folder on VSCode. Of course, you need to install the dependencies with PMPM. Normally, the version of PMPM should be forced, if you're using Corepack or something else, to 8.6.4. It should work with anything under version 9, because version 9 has some breaking changes. So, for the <a href="/tags/code">code</a>, I'm going to paste, again, the repository. It's public, so you can just clone it, download it as a zip, it doesn't matter. I will put the solution afterwards, of course, inside. Right now, it's not there. I'm going to check how much, how is the time going? Okay. We're one hour, 15 minutes in. Again, to make sure, you need to install with PMPM. It has to be PMPM, because there is a log file, and some of the versions of the packages are a little bit outdated. If you cannot install, you can still follow along, ask some questions during the exercises, maybe on the Discord chat or here, whatever. We'll try to figure it out. So, open the folder, install dependencies, and make sure that you're using PMPM 8 and not 9. And so, after that, we should be able to run dev. So, PMPM, run dev. And this is going to start a few processes, and it's going to look like this in the end. So, it's going to be mastering PNIA, three exercises. This is because it's just an extracted version of the course. It's not even the latest version, because I have some updates on the interface, but it's still okay. And so, the first, we're going to focus on the first two exercises. The last one is really a bonus. I don't think we'll have the time to do it, but if you want to do it on your own time afterwards, feel free to. Or if you are going too fast. So, the way the application works is every exercise is as follows. We have an application, a page. We can open the instructions where we have the goals and some extra goals sometimes. We can open that in the editor by clicking there. If you prefer to read the markdown, it will open up the files, and you can see we have the different folders here.

And as I said before, the only <a href="/tags/code">code</a> that we're going to be touching is in exercises. We shouldn't, normally, we're not going to touch anything around. And I think some of the folders are even hidden. So, you don't see them on VS <a href="/tags/code">Code</a>. If you're using something else, Vim, Web, what's the name? WebStorm, they'll probably appear. What else? We have some tests. So, automated tests running. Some of them might be passing initially because they are ensuring that the behavior is working correctly and others not. So, you can inspect the errors with the VTest <a href="/tags/user-interfaces">UI</a> so you can have a better look at what is not working. And in this page, we have some of the <a href="/tags/code">code</a> that we have seen before. This one is broken, by the way. So, the idea is to follow the instructions. By the way, you can also click this file to open the file that we see here. And the goal is to follow the instructions to complete the exercise. I'm going to go through some of the instructions first. But if you feel like already starting, go ahead. So, someone is saying I get the following error. It looks like you cloned the repository. That shouldn't appear. But I completely forgot about removing that. So, what I need you to do is to it's true, I forgot to open that. I'm glad you mentioned it. You need to create some N file. I'm going to just copy this and put it in the chat. No? I mean, the content is really easy. But okay. Copy that. So, what I need you to do is to create a dot N file and put this inside. Bitgit clone warning off. Can I just reveal in Finder here and paste it? It will be easier. Okay. I cannot put files on the on the Zoom call, but that's fine. I should be able to do that in the project. So, what I'm going to do, though, is I'm going to add the dot N file. Not a good practice. Okay. Or I could just remove the check. I mean, it's up to you, whatever you want to change. I should have fixed that before pushing. But it's just like that. So, this one, I don't want it. I'm going to push a fix if you want to pull. I know. How you're working on why do I have a deal store? All right. I think that's it. I mean, you can't completely ignore the message, by the way. It's a mistake. It's just part of the mastering PNEA course. It's a little bit different, the process to get the project. So, that's why it appears like that.

All right. So, if you found the repository, you can pull it, and it should have the <a href="/tags/code">code</a> removed or create the end, whatever works for you. You can also completely ignore it. I think it doesn't appear if you so, it doesn't appear other than the main page.All right. So, the exercise for this one is about using FX scope. So, it's a broken store and it's pretty much about doing what I've shown you. So, have a time, have some time playing around with the API. It's structured with some goals. So, refactor the <a href="/tags/code">code</a> to use FX scope. Make sure that we only do one FX scope per store. The difference is that in this version, we're going to implement a defined store function, okay? So, the defined store function looks a little bit like PNEA's defined store. One of the difficult part is making sure that it works with the test script. And on top of that, if you manage to do everything, there are some extra goals that are, I mean, everything is completely optional. You'll stop wherever you want. But the extra goals are supposed to be a little bit more different. So, one of them is creating an extra FX scope where that allows you to attach all the stores to. And another one is to make your use store functions automatically unwrap refs and reactive objects which will make the test fail, by the way. But this is what we were doing with reactive.I'm going to give you some time. I think how long? This is like 20 minutes should be fine. I'm going to do a check in 10 minutes to see how is it going. Because if everybody is finished before that, we're going to stop before that. Otherwise, we're going to just leave the 20 minutes. And if you have any questions, feel free to post them on the chat or the Discord channel. Yeah, you cannot use PMPM9. I mean, I don't think it will work. I haven't tried. I haven't checked the breaking changes of PMPM. But it was too recent and I just didn't have the time to check. I can check now. Breaking changes. So, all right. Where is the nine? No, you cannot use <a href="/tags/npm">NPM</a> instead of PMPM. There is a lock. So, if you use <a href="/tags/npm">NPM</a>, it's going to install the wrong versions. Definitely. You can always give it a try. But I'm pretty sure it will break. If you want to install PMPM, you can install it with core pack. It's really easy to get started with core pack. So, if you have a reservation of node, which you probably have, you can core pack enable PMPM. I think that's it. And then you should pick up automatically the version that is specified on the I mean, it will tell you should I install PMPM? And you say yes. And it will do everything for you. Honestly, I really recommend to have core pack as part of node. And it automatically uses the right package manager. So, pretty nice. It's been experimental for a while. I mean, 16.

So, it's been a few years now. But it works nicely. Local hosts and invalid response.Can you share? What is the invalid response? By the way, there is a big chance that PMPM 9 works. But it should be easier to just enable core pack. Since it comes by default. With node. So, you can use core pack enable just like that. And it should work. You have also prepare. That works nicely. So, here it will be the point what is the version of the package? Just in case. 6.4. Nope. So, you can do this in the I mean, you need to do that inside <a href="/tags/code">code</a>. So, David, invalid option open. Oh, that error comes on Windows. Yeah. I think this is something I resolved on the on the updated version of the platform. So, you can just remove open. Okay? If you have that error, remove open. And you need to click on the link manually. Otherwise, what was the version? You can put it here. Like you can just put it here. In the dev feed. And I think you can remove the the wrapping single ticks. This should work. I have my doubts now. Let's see. Yeah. It opens the project.Nikita, was that the same issue for you? That's right. It should have removed that. I completely forgot about that. I'm gonna push it as well. Okay. Error SSL protocol error. SSL. Normally, I'm not using a secure tunnel. So, that sounds a bit weird. It throws from the server? From express? Yeah. So, I'm using express, right? Are you going to HTTPS instead of HTTP? Maybe? You should be able to open the project with HTTPS. Otherwise, it sounds like can you try private navigation? Or maybe you have a VPN or something? It shouldn't. I never have that ever reported before for the project. But it sounds like you're trying to access HTTPS. But there is no support for HTTPS. Oops. A connection.Has anybody finished with the extra? Has anybody finished the base? The goals? So, the first goals? And has any other person finished the extra goal? I can who can say I finished both in the chat. I guess I'm gonna give you a bit more time.

If someone is finished at some point, they can send a message on the chat. Or probably, they don't want to say in the public chat. Please let me know. So, I can time it more or less. And we can do some of the instructions.If any of you is stuck, also, please let me know. So, the way you run PNPM, you can run the page. So, the tests are going to be failing in the beginning. And you're gonna see them failing in the <a href="/tags/cli">console</a> as well. So, that's not a problem. And it's just that it's running. If you want to stop, you can do control C. Or I think Q also works. And it's gonna delete the different commands. And you can PNPM run dev again. Or do you mean something else? But you should be you should see the test some of the tests failing. It's normal. Can't keep the tests? I think control C should I mean, I'm pretty sure control C works. If I don't have it running here, and I do PNPM on dev, you should have the same behavior. And then you can do control C here. And it just stops. Or you have another issue. It's important to not have any other server running on the same port. On the same port. Other than that. You can use FQL. You kill the <a href="/tags/cli">terminal</a>. Okay. Control C should work. Maybe you did another combination that hang the <a href="/tags/cli">terminal</a>. But otherwise, if any of you ever find yourself with the project not working, you can FQL on the port. Or based on the process, you can FQL test, beat, node. If you really want to go all the way. And you should also clean up anything for you. Let me just put this thing here. Where is it? It's pretty cool, honestly, to search also for applications that are running. So, for example, if I do it here, I can try to check for anything running on the on the port by passing a colon in front. And I don't have anything here. But if I run the dev server, and then I do it again, I should be able to see node. Node. I can kill it here. And it will stop the server, of course. You can also search for test, for example. Which doesn't appear here. Which is weird. But you can also kill the ID here. V for V test. As you can see, I've done it in the past. It's pretty useful. Is everybody okay if we do some solution check in one or two minutes? Or is there anybody who wants some extra time? Or anybody who wants to get some help? Okay.

Let's do a solution. I think I got some bug. I don't know. Really weird. Let's see. Yeah. The zooming is really bugging out. It's really weird. Can I do the <a href="/tags/video">video</a>? Seems to be back. Okay. Yeah. Sorry. I don't know what happened. Just lost the connection for some reason. So, I was saying let's do the solution. Since you can see my screen. I think it should be back. All right. So, we have two files, mainly. I mean, we have a few. But the most important ones are mypina and store. So, the store, we're going to have to change it because we have these how to say these store objects that are is being created every single time. Which is the version that doesn't work, as we saw before. What we want is to have some const use constore and then we can use define store from mypina and inside we're going to return what we see here. Right? So, this is the <a href="/tags/code">code</a> that we want. Now, of course, it's going to complain because well, nothing is retyped correctly. And here mypina doesn't even have a type. Now, what we want is some kind of function. And that function is going to be a setup function. And it's going to return something. Which I'm going to type as any for the moment. And that is going to and then here we're going to return whatever we need. So, now we can remove the ports. And at least we have our store definition not working, but ready to work with the implementation. So far, is this good for everybody? Or does anybody have any questions regarding the refactor of our own store?Actually, went a little bit too far right away. I mean, this is what we did in the exercise before. So, this is more about putting an Fx scope like we did here. And having a detached scope. This is pretty much what the exercise was asking for in the first place. But I guess that since we have done that already, we can go a little bit faster. And that way we have more time for the next exercise as well. So, what I want at the end is to achieve this. And so, I need to make sure that I can run my Fx scope within some function. Now, define store is supposed to return a use function. So, we will have here, for sure, some return function new store. Okay? And this function is the function that is going to create everything. So, this is where we're going to have the Fx scope, right? So, we have some kind of const Fx equals Fx scope. And we have to ensure that this Fx scope is created only once. So, we have multiple ways of handling that. And the way I'm going to do it is by using a week map.

So, within a weak map, I can specify all the stores regarding, I mean, all the store instances based on each defined store function. And I can also use that to declare Fx scopes or whatever other thing I want.Now, before doing that, what I need is to actually create my global Fx scope. So, this one here, as we saw before, is going to be located to it's going to be dependent on whatever component is going to call use store for the first time. So, that's not going to be good. So, we need some kind of global Fx that is going to be an Fx scope and it's going to be detached. And so, we're going to use that in the first thing.So, the weak map here is honestly not that important. We could use a map as well. The important part is that I don't need to care about the disposal of the resources. So, in <a href="/tags/ssr">SSR</a> apps, it plays a role. In other scenarios, it doesn't play a role. So, a map will also work. In a more realistic, I mean, in Pinia, I use IDs. So, I have strings to reference each store. And so, a weak map wouldn't even work. This is more of a practice I personally have to use weak maps for things. I don't have control over the disposal.

Since the weak map allows me to, I mean, not even allows me, it forces me to use an object as a key and it also allows me not to reference the disposal of the store. So, here I'm going to say that we have just any function. And we're going to type the return value as unknown. So, we don't know exactly what we are storing it because the stores can have different shapes. And so, here I can pass the argument FN and then on the getter I can pass the argument FN as well. Is everybody following so far? Or do I have an issue with the connection? Seems to be good.The weak map here is honestly not that important. We could use a map as well. The important part is that I don't need to care about the disposal of the resources. So, in <a href="/tags/ssr">SSR</a> apps, it plays a role. In other scenarios, it doesn't play a role. So, a map will also work. In a more realistic, I mean, in Pinia, I use IDs. So, I have strings to reference each store. And so, a weak map wouldn't even work. This is more of a practice I personally have to use weak maps for things. I don't have control over the disposal.

So, if I don't write delete myself, then I'm probably gonna use a wig map. Okay. So, what we need to do now is create the store. So, the store is going to be created through the global effect. So, we need to run the global effect.run. And inside that, we need to run the function. So, we can just do FN if we want to. That should be enough for the moment. We can also do the version with FN. And we probably need to well, in this case, we don't need to tell <a href="/tags/typescript-libraries">TypeScript</a> that the value cannot be undefined. You may have noticed while you were doing the exercise, but run depending on what you return here, can return undefined, depending on the scope being disposed or not.Most of the time, you know if you're running the <a href="/tags/code">code</a> that is not disposed, you have to use an exclamation mark to tell <a href="/tags/typescript-libraries">TypeScript</a> that the function is there. And the important part is saying set of FN store. So, I'm passing as a key function the store, and then I can get it here. Now, of course, I have zero typing so far, which I will have to fix it later. But if I go back to my application, I should see some stuff working. Now, what the heck happened here? I have some weird bugs. So, the tests are passing now, as you can see. The exercise we're doing are passing. So, we have completed the minimum of the exercise.

Now, of course, I want to make this work with types. You don't have to. Depends on your experience with <a href="/tags/typescript-libraries">TypeScript</a>. But I wouldn't let myself have that. So, in order to make it work with types. So, right now, just to show you, if I use my store, everything is just unknown because we don't have a type here. This is unknown. So, what we need to do is to pass, to make this define store generic. So, we're going to add a return type and we're going to say that the function returns error. R, sorry. And here, we're going to say we're going to cast the store as R. And now, we should have some types. So, just as simple as that. I mean, <a href="/tags/typescript-libraries">TypeScript</a> is not always that complicated. I have a bug with the resolution. It's really weird. Anyway, I hope you can see the screen correctly, despite the cropping of the resolution sometimes. I don't know why it's doing that. What the heck?There are a few extra things. It's saying that right now, we have one global effect scope and we're using that for each store, for all the stores. But we could also create one FX scope for every single store. Now, in this case, it's not going to change much for the exercise itself because we're not going to push that further. But it does allow us to individually dispose of each store. So, what we have right now with a global effect allows us to dispose of all the stores at once, right? If we, at some point, we want to stop the application from running and to mount a new instance of the application or another page for a microfrontends, I can just run stop, and that will run. It will just stop all the stores. But this is not very flexible, right? So, a more flexible approach will be to have a FX scope that is specific to each store and a way to set it on store as well. So, here, what we're going to do is, rather than creating the function within the global effect, we can create a local effect that we run within the global one. So, why do we do that? We do that, and this one is not detached. We do that so that the effect will automatically be disposed if we dispose the global effect, just to have that kind of relationship. We need to tell TaskScript that these values cannot be undefined. There we go. And now here, instead of doing global effect, we can do effect. Now, of course, it doesn't change much for the... Never using Zoom again for a <a href="/tags/workshop">workshop</a>. What is this shit? I don't know what the hell is happening with Zoom. So painful. Let's see. Okay, should be back. Screen sharing seems to be working. All right. Do you... Can you see me again, I guess? Yes, but just to make sure. Where was I? I was saying that we had the FX scope.

Where was I? I was saying that we had the FX scope. Okay, sorry for that. Again, a bug on the... I don't know, it just crashes like that. Could be some of the hardware too. So, these here is not useful. Having a nested FX scope in this specific case is not useful. In Pinea, we have this mechanism. So, the Pinea is an FX scope by itself, and each store has its own FX scope. And that allows each store to be disposed of individually. All right? So, that allows you to to free any resources that you don't need to use anymore. That's the only use case. That's it. What else? What else do we have here? I think that's the gist of it. All right? We have a global FX scope. And now, the last part is making everything unwrap. Of course, this is a bit a bit weird. But it's... the difficult part is not the feature itself. Because the feature itself is just that. I put in reactive there. The difficult part is making the types work. Now, for the types to work, you need to do some extend and stuff like that. Like, extends record of string or not even just any. Any or unknown. And so, the thing is, we will have to change how things work here. Because we still have the computed and everything. But we don't. This is going to break the application. As you can see, the tests are failing again. So, when we use reactive, it means we need to use some kind of two refs in order to extract the references. Now, this should make it work again. But of course, one of the tests is not going to pass anymore. So, if you want to type these correctly, you need to make return type a little bit more... a little bit different. So, we need to basically simulate the reactive. So, what we want is a type here. You see that unwrap nested refs of r? So, that's what we need to put here. Unwrap nested refs of r, right? Yes. And now, here... we have refs here. So, why did I use the WigMap? Again, I thought I... I mean, there is really not a good reason why I used the WigMap. So, maybe you have a question about the WigMap itself. But I used the WigMap because I don't have a delete here. I'm not deleting any entries of the map. So, in this scenario, it just works without...

But I used the WigMap because I don't have a delete here. I'm not deleting any entries of the map. So, in this scenario, it just works without... it doesn't create any leaks. That's the only reason I created the WigMap. But it's more of a... I'm just used to using WigMaps in those scenarios. But you could use a map, definitely, and it works as well. I don't think you would have any issues with some memory leaks in this scenario as we're not handling any <a href="/tags/ssr">server side rendering</a>, anyways. With WigMaps, you don't have... I don't know... for anybody who doesn't know what a WigMap is, it's like a map, but it holds what we call a weak reference to the keys. So, that means that whatever it uses the key will not be held as a reference and therefore can be garbage collected. And because of that, you don't have some methods on WigMaps. Like, you cannot get all the keys because there is no reference to the keys. You can still delete and add and get and use has. But it doesn't hold a reference to the key and therefore they can be garbage collected. So, they are like automatic maps but they only work for object and you cannot list the values or the keys. So, in this scenario, it's exactly what I want. I don't want to care about the memory allocation and deletion. That's why I use the WigMap. Just because of that. I don't recommend you to go for the WigMap as a default, like I just did there. Do you have any other questions?All right. I'm going to keep two versions. So, I'm going to put that afterwards on the repository. And I'm going to keep two versions here. The initial version that defines a store without reactive. So, this should work, right? Yep. Of course, this is completely useless. So, let's just keep it that way. So, I'm going to have both versions. The one that doesn't have reactive and the one that has reactive. All right? Okay. All right. Let's move on to the next part. So, dependency injection. All right. So, this is another page of the <a href="/tags/documentation">documentation</a> which talks about dependency injection. Now, um... dependency injection is something that most of the time you don't use in application <a href="/tags/code">code</a>. You are allowed to. There is no problem with that. But most of the time, you don't need to. It's bugging. All right. I think my <a href="/tags/code">code</a> crashed yet again. Maybe overheating the computer or something. I don't know. Let's share the screen.

Okay. All right. Let me open the chat on the side. If you wrote anything since I left, I haven't seen it. So, you can please say it again. Please do it. I think my computer is overheating or just one of the parts is overheating and it's shutting down some of the connections. So, I was saying, I was talking about provide inject. And this is gonna be the last piece to make the store work in every context. Namely, <a href="/tags/ssr">SSR</a>.So, provide inject itself, it's a very simple API. It allows to resolve problems like prop drilling which is creating artificial props in components so we can access some <a href="/tags/data">data</a> that was defined up in the component tree structure. And so, what I want to say is that, yes, I was saying that providing inject is something that is not used in application <a href="/tags/code">code</a> often, but is extensively used in libraries. So, for example, if you take a look at the router, you're gonna see that every time you call use router or use route, it's just a wrapper for inject. It's just doing that. And that inject is gonna get a key, which is a symbol. And that symbol is provided to the application through app.provide. So, when we do app.use router, this is the function being called. And then the function which is installed, by the way, should be here. So, this is a view plugin. It's gonna call app.provide, pass the key and pass the router instance. And then anywhere in any component we can call inject, we pass the same key. Sorry, the same key, router key, and we get access to the router. Now, the key can be anything. It can be a string, it can be a number. But it can also be a symbol, which guarantees that you have a unique key for your injection. And so, this is one of the use cases for libraries. But providing inject can be really useful for a couple of components. Here we're doing for global properties. So, we have app.provide and we have access to the provide value anywhere. But sometimes we want access to some context within a set of components. And this is what we call couple components. Now, let me show you one example. I'm gonna copy paste this in the chat again. This is a tree view. So, a tree view is a component that is recursive. So, it displays itself. As you can see here, tree file, it's our cell. We pass an entry that might have children. So, an empty array or not. And then we display, well, the some buttons. And we can collapse the different, well, properties. And so, each tree file has a collapse, which is local. And then we have these entry prop, and that's about it. This is a very simple component. And in the app, what I have is the <a href="/tags/data">data</a> and I'm displaying the root. That's it. That simple. Now, let's imagine that I want to not display every single, so, by default, I'm gonna reload here. I have everything and collapse.

This is because collapse starts as fault. One thing I could do is or one thing I like to do is only have the first level and collapse. So, for example, this is having everything collapse. And what I want is this. I want to only display documents and other, which are the first level of collapse. So, how do we do that? We can do that by providing a property within the tree file. And then in other nested tree files, we will get access to that property.So, I'm gonna go here and say const depth equals inject depth. And so, inject is going to be the other side of the coin. This is where we get a property from a parent. And so, by default, this is going to be undefined. Now, if we put it can I put it here? Just to show. What do you mean? Oh, yeah. Depth not found. I think because it's undefined. There we go. It's not showing anything. So, the type is undefined because we're not providing it anywhere. So, what's interesting is when we think about it, the first tree node, the root, will not have a depth property. So, we need to provide a default value. This is done by passing a second argument, which is going to be zero here. Now, if we check the depth, everybody is going to have a depth of zero. And now, what's interesting is providing that value again. So, we do provide here. And this is similar to app.provide. But is scoped to these tree. So, to the tree of my component. So, it only applies to children of these tree file component. And now, you can see that the depth increments, right? 0, 1, 2, 1, 2, 2, 3. So, now we can use this for collapse. We can say, okay, if the depth is superior to zero, we start collapse. And we can change that and we can see how the result changes depending on how much we want to show. I'm going a little bit fast. But that's pretty much provide inject in a nutshell. Most of the time it's used for global properties. But it's also very useful for couple components. And this is one example of couple components. If you have any questions regarding inject provide, have you have any of you used inject provide before in scenarios like this, like couple components? Not to provide globals. Okay.We have one issue with the current approach of using a string or inject and provide. And that is that if we have another component or another global injection that relies on this key, depth, then any children of tree file that uses that original depth injection will get this number instead. And we also have another issue is that depth is not typed. Here it's set at zero, which is not correct. So, how do we improve that? We improve that by using a symbol. So, a symbol is created with a key word symbol without new. Okay. And that allows us to have a unique identify. Now, if I do what I'm doing right now, it's not going to work. Why? Because the symbol is created within setup. So, it means that every single instance of a tree file component is going to have a new symbol that is unique.

So, instead, what I'm going to do is to create a different script where I'm going to move this. And now, things are working again. As you can see, the depth is correct. It's still not typed. So, how do we type it? We type it by using a cast. We use injection key from new, which was added there. And then we have the type. Can be a number, an object, whatever you want. It can be a function, can be ref, can be reactive, cannot be not reactive. It can be anything you want. That's the good part, is that it's flexible. And now, here, depth is a number. And if I try to provide something that is not a number, it's going to tell me, hey, this is not assignable to a number. So, that's in a nutshell how you provide inject and how you type it by using injection context. So, do you have before going into the exercise, do you have any questions regarding inject provide? All right. So, let's move into the exercise. I'm going to send you the the solution for the for the playground there, and I'm going to paste it on the on the discord as well. The next exercise is the 1.6, adding inject provide to the store. So, here, we should have the working version from before. Now, in the context of this application, we will not be able to see the main benefit of using inject provide, which is ensuring that in this case, ensuring that the <a href="/tags/code">code</a> works in both SR apps or not. But we have tests to make sure that the <a href="/tags/code">code</a> works in both scenarios. Now, Daniel is saying for recursivity, I understand the usefulness of inject, but in general, wouldn't a component property be better? Is there any other use case where providing inject is useful? So, it's true. In most scenarios, you want to use props, right, for components. The only reason you want to use inject provide is to have components that are coupled together. So, the difference is that it's not passed as a prop. If you have a prop, it means that you need to explicitly pass it here. So, it's much more error prone. If you have multiple versions of the component in the template, you need to pass it every time. But by having an injection here, not only it's implicit, so it becomes an implementation detail, it's not exposed outside of the component, but it's also less error prone than the prop. They do differ in nature because you cannot pass the prop from the outside, right, and so that's the intended behavior. Maybe I want to expose the initial depth and in which case, I can expose that initial depth prop or even the depth itself. Bijan is saying, how will another component, not TreeFile, or its children know about depth keys? They cannot, and that's the that part of the injection dependency parody, right? You cannot know outside of the tree where this property is injected. Does anybody have other questions? Let's go back to the exercise. So, in this one, the goals are really technical, okay? There is no new features visible in the application to add because the goal is to make everything work with <a href="/tags/ssr">SSR</a>. So, you will see that we have a very similar store. Okay, let me just close everything here. And this is easier to open the exercise. There you go. So, we have mypinia and store. And you see that here we have something a little bit different. So, we have the store as before, we won't need to change this file, and then we have mypinia. So, we have the defined store, and then we have the app plugin. So, this app plugin is empty. We will need to add some <a href="/tags/code">code</a> here. And then you have some <a href="/tags/code">code</a> from before, so similar to what I was doing with an fx scope that is local and then a global fx scope that is the parent of all the fx scopes. What else do I need to tell about this? Yeah, so, the goal is not to share the store instances. Right now the store instances and the global effect are shared, okay? They are here, and they shouldn't be here. They should be provided by the application so that each application instance has its own map of stores, its own global effect. And so, this is important because when we do <a href="/tags/ssr">SSR</a>, the server will render multiple requests, depending on the nature of the server, but in most scenarios it renders multiple requests and creates a new application instance for each. And if we share the stores instances, we will probably leak information from the users from one application to another.

So, that means that we have two requests going to the server. We have two applications, but they share the same stores. So, we may end up with the user information from the first user given out to the second user, which is what we call cross state pollution, which is a bit severe <a href="/tags/automated-security">security</a> risk. This is implemented by PNIA, of course, behind the scenes, but it's useful for any other global kind of global state that you have in your application to use, inject, provide, to make sure that the version that you use is independent and is scope per application.So, again, I'm gonna give you, since we finished at half, let's take 20 minutes for this and then I will do a solution in 10 minutes. Okay, so, this one is way shorter, should be way easier than the previous one. The one that is a bit longer and curious is the bonus, which I will leave it there for you, and I will send you the solution anyway in the repository. If you have any questions, as before, please let me know. I hope that the call doesn't cut off this time. It should be fine. I moved the camera. I think the camera was broken. Sorry. Changed the camera.Okay. Let's do a correction then. And that way I can give you some we can do some extra questions of other topics you want to just have a quick conversation about and I can also explain you a little bit the next exercise, which we won't have the time to cover right now, but I think it's interesting and it goes a little bit further from stores themselves, but it also uses some of the techniques, especially inject, provide. So, in this exercise, we have to change how we use stores and global effect, and we have this app plugin that is just a view plugin, and we have access to the app where we can do the app provide with things that we want to use. So, we can do things like app.provide and then we can pass a key and the effect and the stores map, right? So, we could, of course, use a string key here in the first place and make it work, but I'm going to use right away an injection key and have everything done. So, I'm going to say const effect key and I'm going to do symbol and I'm going to say just effect or mypinion effect, whatever you want, doesn't really matter, injection key, and this is going to be an effect scope. There we go. Imported from view. So, I think I'm adding all the types automatically. Then I have the store maps. So, stores map key equals symbol. Stores map and same as injection key and I'm going to use the week map and I think I'm just going to copy the type from here. So, now that I have the keys, I can provide them here. So, I can say effect key and I can say effect scope with true because it's attached and then out.provide stores map key with just a new week map. So, no need to pass the type params here because we specify them in the key and that's it. So, I mean, that's not it, but that's what we need to do within the plugin. We create the effects and the week map in a plugin. So, that way each application instance has its own effect scope, its own week map and then inside of use store. So, the important part is it has to be inside use store. It cannot be here, outside. This is defined source. So, it runs outside of components and so we don't have access to the <a href="/tags/vue-composition-api">composition API</a> and stuff like inject provide. If we try to do inject here, we will have an error. We'll have a warning saying that we don't have an active app or that inject was called outside or whatever.

So, what we do is we say const global effect. So, I'm going to take the same names as here just so that I can not rewrite the rest of the <a href="/tags/code">code</a> and here I'm going to use inject and pass the effect key. I think I need to do that and one thing I need to do is to make sure that it exists. So, there are multiple ways, of course, we can cast it with <a href="/tags/typescript-libraries">TypeScript</a> or throw an error in libraries. Something that we see very often is check for the existence or sometimes we also see if not get current instance. So, if we don't have a current instance and there is not a current scope, that means that we cannot use inject provide. This is, of course, an <a href="/tags/deep-dive">advanced</a> technique for warnings. It's not really important. Normally you document where you're supposed to use your functions. And normally if your function starts with use, it's a composable and it should not be used in any places. It should be used within setup of components or within stores. There are specific places where they can use a store because it's an effect scope but anything that is a scope, basically. And the last one we need is stores. So, same. Inject stores map key. And same. It has to be forced as not unifying. We can remove. Where are we? Yes, at Corbin. Go ahead and unmute yourself or do I need to? Or write on the chat if you want. Maybe they rose the hand by accident. Okay. My mistake. No worries. And this is pretty much the first part. This was already done before. I don't know why I have that as an extra goal. It was already in the <a href="/tags/code">code</a> anyway. So, that's it. We should have everything working on the application. We have all the test passing and the application works. That's it. Do you have any questions about the exercise?If there are no further questions, let's do some conclusions on some of the things we have here. This is the bare bones BDN. He doesn't have subscribe, he doesn't have plugins, he doesn't have OnAction. But it does cover the <a href="/tags/ssr">SSR</a> part, it covers the global state, it covers the usage, it covers the types. So, it covers a big chunk of what PNEA is supposed to be. This is also just a section of the Mastering PNEA course, as I was saying. And so, on the Mastering PNEA course, we go a little bit more into how it works behind the scenes. That's a way I like to teach some of the libraries, especially the ones I build. But not only. So, we go into some of the technical details that are interesting behind the scenes. So, how the OnAction works, some of the caveats that are related to <a href="/tags/vue-3">Vue</a>, et cetera. So, it goes really deep into everything related to PNEA. So, there is maintainable stores, how to keep the store simple as well. The differences between set of stores and option stores. How to consume the store correctly. So, this covers a lot about the <a href="/tags/reactivity">reactivity</a> things that some of the questions that we're asking at the beginning about revs, how the unwrapping works, et cetera, et cetera. And then we also cover plugins, and how to test them.

And then we also cover plugins, and how to test them. So, you need <a href="/tags/testing">testing</a>, some mockings, mocking stores, mocking requests, how to what should be tested in components, in stores. And also, how to augment PNEA with plugins. So, this is an interesting topic that is barely covered in <a href="/tags/documentation">documentation</a>, and it's very powerful. The outline doesn't seem correct, by the way, which is weird. Because I sent the updated version a few days ago. We have to check that. In any case, the next exercise that appears in the platform, it's about inject provide. It's a little bit longer and more complicated. But I think it's an interesting one. So, the idea is to implement some tab managers with tab pane. And it goes from I want to have this API. This is also a way I like to sometimes start development of features is I want to have this kind of API. I have to be able to write this component and nest another component inside and have things work. So, we only have a V model here. There are tab panes with a content. That's going to display one of them. And this is going to combine inject provide composables and slots. So, I told you, you can use anything you want in inject provide. So, that includes functions, reactive variables, it includes composables, if you want. So, you can go really far with the feature. And this is another example of couple components where some of the functionality do not make sense as props because they are implementation details. So, they make sense as implicit properties in inject provide. And so, this exercise is longer. It has a few extra goals. We can couple the V model to the route and everything. It's really interesting. If you had fun, if you want to have another <a href="/tags/developer-challenges">challenge</a>, I recommend you to go over this exercise, which is a little bit more complicated than the others. And if you're interested in doing more exercises and other exercises that are more related to PNIA and not to implementing PNIA itself, give Mastering PNIA a course. Give Mastering PNIA a look. And it's outlined below. Do you have any closing questions about anything we did, Mastering PNIA, PNIA itself, or even <a href="/tags/vue-3">Vue</a>? All right. Well, I think that's going to be it from my side. If you don't have any questions about anything, we can stop here. I hope you had some fun. You learned something new today. If you have other questions, you can post them on the Discord. I'll keep an eye on it probably for a few days. And I will add the solution. So, you can just have a look at the <a href="/tags/code">code</a> that I did on Zoom. I will put them on the GitHub repository under a solutions folder or maybe create a branch solutions. See what I do. And I hope you had fun. And well, see you at a conference or see you another time. And I enjoyed the <a href="/tags/vue-3">Vue</a> JSConf. Thanks for thanks. I'm glad so many of you enjoyed. It's always really difficult to read the room in a Zoom call. Bye bye. See you. Have a great afternoon. Have a great day. And see you another time. Bye bye.

Vue.js Live Conference

Vue.js Live 2024

Building Pinia From Scratch

Construyendo Pinia desde cero

Reactive and ref are both reactive in Vue, allowing objects to be reactive and removing the need for writing 'value'. Store to refs is a specific version of refs in Vue. The exercises are located in the 'exercises' folder and include automated tests. Implementing FX scope in Vue allows for refactoring and better code organization. Weak maps are used for resource disposal and dependency injection is useful for resolving prop drilling issues.

Let's dive into how Pinia works under the hood by building our own `defineStore()`. During this workshop we will cover some advanced Vue concepts like dependency Injection and effect scopes. It will give you a better understanding of Vue.js Composition API and Pinia. Requirements: experience building applications with Vue and its Composition API.

Eduardo San Martin Morote

JSNation US

I’m attending JSNation US. Join me there for free with 10k other JS engineers and 50+ great speakers. Just follow this badge.

JSNation US 2024

React Summit US

React Summit US 2024

React Advanced

React Advanced Conference 2024

Productivity Conference

Productivity Conference 2024

React Day Berlin

React Day Berlin 2024

Node Congress

I’m attending @NodeCongress, the biggest conf on #JavaScript backends – by clicking the badge you may get a free remote ticket & join me there with 5k other #nodejs devs & 35 great speakers #deno #cloudflare #awscloud

Node Congress 2025

JS Nation

I’m attending JSNation – the main JavaScript conference of the year. You may join me there for free with 10k other JS engineers and 40+ great speakers. Just follow this badge. 

#javascript

JSNation 2025

React Summit

I am attending the biggest #Reactjs conference remotely. You may get a limited free ticket (50% of talks, no workshops) and join me by clicking this badge.

#react #reactjs

React Summit 2025

C3 Dev Festival

Join me at C3 Dev Fest, a contemporary software engineering festival!

Register to win an all-paid trip to Amsterdam. Elevate your career with industry experts and workshops & rock 3 dance stages at the after-party!

C3 Dev Festival 2025

TechLead Conference

I'm attending TechLead Conference 2024 – get your free remote ticket and join me there

Building Pinia From Scratch

Comments