So you know what, you don't even need to consider it. Just move on straight to Pina. All right, let's get going. All right, so here's what I'd like to do. In the next chapter, we're going to put all these pieces together and whip up a small little example project. But for now, just to demonstrate the basic workflow, I want to take the makeshift counter store that we created in the last couple episodes and convert this to Pina. All right, let's get going. npm install pina.

All right, let's get going. npm install pina. All right, next I'm going to go into my entry point, which is main.js. All right, and let's import it, createPina from pina. And then we're going to register it as a plugin. So we can do it by saying app.use(createPina). And I'll call that as a function. And that's it. We're ready to go. So now if we go to counterStore, in terms of file naming conventions, again, you can

We're ready to go. So now if we go to counter store, in terms of file naming conventions, again, you can do whatever you want. Whatever your company is already doing is what you should do. But you also might see people use capital letters. And that's what I generally do. So again, whatever you want. But this is generally what I prefer. OK, next I'm going to delete all of this and rebuild it from scratch. To begin, we want to define a new store.

OK, next I'm going to delete all of this and rebuild it from scratch. To begin, we want to define a new store. So I can import defineStore from pinia. All right, let's call that now. Now the first argument is going to be a name. It can be anything you want. In our case, counter would be perfectly fine. And mostly this is used when wiring up to DevTools. And I'll show you that in a minute. Next we're going to have an object where we can declare the state, any actions we might

And I'll show you that in a minute. Next we're going to have an object where we can declare the state, any actions we might have, any getters or computed properties. All of that will go here. So in our case, rather than doing it at the top level, like we did in the last episode, I'm instead going to define a function called state, and that can return an object. So very similar to your standard view components. OK, so now let's assign this to a variable. So I could do something like this. But again, following typical conventions, this is very similar to composables, we might

So I could do something like this. But again, following typical conventions, this is very similar to composables, we might begin it with use. So useCounterStore. But again, whatever you want to call it works for me. All right, the only remaining step, of course, is to export this. And we're ready to go. So now if I come back to CounterView, let's do this. We're going to import useCounterStore from our new store. And the only difference here is I need to call this function.

We're going to import useCounterStore from our new store. And the only difference here is I need to call this function. OK, let's do it like this. Let counter equals useCounterStore. OK, so now this should mostly reproduce what we had in the previous episode. The only difference is this section right here, where we call an increment function or a function. For now, just to show you that you can, let's mutate it directly. So I can say counter.count plus plus. And this is important.

So I can say counter.count++. And this is important. Notice that I'm able to access count directly off of our store here, even though it's within a state function that returns an object, I can still access it as if it was declared on the top level. OK, so now if I come back to Chrome and give it a refresh, this should do exactly what it did in the last episode, and it does. But now we have some cool wins that come from this. For example, if I go to the View tab, well, a couple of things. Notice we had this new pina tab.

For example, if I go to the View tab, well, a couple of things. Notice we had this new pina tab. And at this point, notice we only have the one store, counter. So notice that is the same name as what we have here. If I changed it to myCounter and come back, let's give it a little refresh. Sure enough, that name gets updated. So it's like an identifier. OK, let's bring it back to counter. So anyways, one more refresh, and I can see the initial count is zero. I can increment it.

Or I can advance the timeline back to what we currently have. Pretty cool. OK, but anyways, what else? Let's go back to our counter view. So yes, we can mutate our state directly. But again, if you'd rather reach for dedicated actions, we should return that counter.increment function that we had in the last episode. All right, let's switch back to counter store. And again, the only difference is rather than defining it here, I'm going to nest it within an actions object.

Well, we might want to extract the maximum count, but for now, I'll just do a little duplication and say return 10 minus the currentCount. And now we have our getter. All right, let's use it. Switch back, and maybe we'll do it right within here. In parentheses, we'll say counter.remaining. We access it just like any other state or any other computed property. And then I can say remaining. Okay, so let's give that a refresh. And sure enough, 5 remaining, 4, 3, 2.

Okay, so let's give that a refresh. And sure enough, 5 remaining, 4, 3, 2. It's all so easy. And we could even disable this button. Here, let's clean this up just a little bit. We could disable the button if there are no remaining clicks. disabled equals !counter remaining. Okay, switch back. We have hot reloading here. And sure enough, that button is deactivated.

And again, if that's confusing, in your head, just map it. state is your data. It's just your data that you're keeping track of. Your actions are functions. They're just your methods. And then your getters are your computed properties. They're effectively the same thing. They just have different names. But in your head, do this mapping, and then you'll completely understand it. Okay, so I think we've reviewed the absolute basics.