All right, welcome back. So in just a little bit, maybe the next video, I will introduce you to a tool called Pymia. But you know what? Why don't we take five minutes or so and just talk a little bit more about how you would wire this up yourself. Okay. So let's do this. Why don't we introduce a new page here? I want to show you an incredibly simple example, and we'll use the common counter. So we'll call this counter view.

I want to show you an incredibly simple example, and we'll use the common counter. So we'll call this CounterView. And of course, right now, just creating the page doesn't change anything. I have to register it with the router and then add the link here. Okay. So this will be a nice little recap into my router. Let's add a new one here. If the User visits counter, this will have a name of counter, and then it will load a component called CounterView. And I'll need to import that at the top.

component called CounterView. And I'll need to import that at the top. Import CounterView. Like so. All right. Next, if I go into app.view, here's our navigation. So I will add a new one here for our counter. And let's have a look. Yeah. So now if I click on it, we have a dedicated page for our counter.

Yeah. So now if I click on it, we have a dedicated page for our counter. And don't worry, this is going to be pretty basic. So we'll have an H1 here where we track the count. Yeah. Granted, this is a laughably basic example, but we're going to go with the idea that we need to access this counter from other pages in our application. So with that in mind, I'm going to use a dedicated store, right? Here's our store directory. And we'll call it counterStore.js.

Here's our store directory. And we'll call it counterStore.js. And just like we did before, we'll declare our counter. It'll be reactive. And to start, we'll have a count that initializes to zero. Finally, I will export this. All right. Let's get going. So now in counterView, I can import that and then reference it like so. Counter.count.

So now in Counter view, I can import that and then reference it like so. Counter.count. All right. Let's have a look in the browser. And yeah, this is going to work. And you know what? This is fine. But in fact, if you have a look at the view documentation, they will somewhat discourage this approach, this approach of referencing and mutating the state directly. Instead, they would recommend that you use a method.

Everyone likes to imagine they're building the next Twitter. And maybe you are. Or maybe you're building something pretty small. So just keep that in mind. Always choose the simplest approach that will get the job done. And yeah, maybe you will eventually get to a point where for the application you're building, you need something not so simple. But yeah, just keep that in mind, OK? So now if we come back to our counter store, if we were to switch over to a method, we might have one like increment.

So now if we come back to our counter store, if we were to switch over to a method, we might have one like increment. And this can now be exclusively responsible for incrementing the count. And we get the benefit of assigning a dedicated name to what this action is. And in fact, you're going to start seeing these referred to as actions. So you can imagine this being your state, which is effectively the data. And then methods like this will sometimes be called actions. But again, state, data, method, action, they're all kind of the same thing. You can use them interchangeably. OK, cool.

You can use them interchangeably. OK, cool. So now if I come back, instead of mutating directly, I can instead call a method, counter.increment. And now we'll get the exact same thing as we had before. Pretty cool. And of course, the benefit now is, well, it's a little bit easier to debug this. For example, maybe we are incrementing the count somewhere in the application, but you're not sure why. Well, now you have a dedicated place to, for example, debug, do a console.log. You could even add guard logic.

Well, now you have a dedicated place to, for example, debug, do a console.log. You could even add guard logic. So for example, maybe, just as a silly illustration, maybe if the count is 10, then we don't go over that for some weird reason. We don't go above 10. This counter is good for 1 through 9, not 10 or 11. So if that's the case, we will return. Yeah, now you have a dedicated place to store logic and behavior and guard clauses like this. So yeah, now if we go up, we should be able to increment to 10.

this. So yeah, now if we go up, we should be able to increment to 10. But if I keep clicking, it will not go beyond that. OK, so yeah, that's definitely a benefit to this approach. And again, whether you call this a method or an action, they're kind of interchangeable. I only bring up these terms because once we, in the next episode, review a tool called Pinya, you're going to see these terms like getters, actions, state. But they're really just data, methods, computed properties, kind of the same thing. So yeah, think about it. Now, if we need to access the current count from any of the pages in our application,

So yeah, think about it. Now, if we need to access the current count from any of the pages in our application, it's really easy to do so. Whereas if we had instead stored it all on counter view, like maybe you had something like this, well, then it's not so easy. Because as soon as I switch to a different page, the counter view is swapped out with a totally different view. And we no longer have access to that data. So let's just have a look. Maybe the User goes to about page.

So let's just have a look. Maybe the User goes to about page. We're going to import our counter. And now I can say the current count is counter.count. All right, let's see. Give it a refresh. Let's go to number six. And if I switch to about, yes, we have access to that state. And that is the huge benefit to an approach like this. Okay, so hopefully you're getting a little bit more comfortable with creating your own