While overall, Vue is moving towards heavier use of the Composition API. If you prefer using the Options API, you're in luck. Pina supports that, too. All right.
To see that in action, let's open up the Header component and do a quicker factor to make it use the Options API. I'll remove Script Setup, add in the Default Export, and lastly, register the CartWidget component. with the components option. Sweet.
Now let's say that we wanted to access the AuthUserStore to show the user's username in the header. How might we do that with the options API? Well, first, we still have to import the store. However, we'll also need to import a mapState helper from Pina.
Now, exposing the state from the store to the component involves using the computed option. So I'll add that into my options. Then inside of computed, we'll call mapState, passing it the use of userStore function as its first argument and an array of pieces of state that we want to expose as the second. In our case, the username.
Lastly, we'll have to use the spread operator to spread that state into the computed option. Cool. Now let's display the username in the header. I'll just wrap the cart widget in a div and put the username in there.
That way they both show up on the right hand side. I'll also add in a couple of Tailwind classes just to make things a little easier to look at. Nice. So there we have it.
That's how you'll use Pina with the options API 90% of the time. For other edge cases though, Pina does provide a few other options for how to access your state. Let's take a look at those. Let's say for some reason that you'd like to remap a piece of state to a different name within your component Well, you can do that too by providing an object to map state instead of an array Then you'll define your custom local name as the key We'll say user and then the name from the store as the value in our case username And you'll notice as soon as I save that the username disappeared from the header over on the right-hand side.
That's because we've got to update where we're printing it out now in the template. And we're back in action. Nice. All right.
Besides directly accessing some state, we could also provide a function to manipulate the output of that state before setting it as the computed prop. For example, we could change the user here to a function that is going to receive the store and outputs a greeting along with the username. And sure enough, that works too. Eh, the styling's a little funky, but it works.
Next, when we use map state, we cannot directly mutate the state that we expose to the component. For instance, let's say we had a text input and then used vModel on it. Over in the browser, if I try to type in the input, you'll notice that the username we're rendering next to it doesn't change. Also, if we look in the console, you'll see a nice error letting us know why it didn't work.
It says that the right operation failed, computed property user is read-only. Awesome, that's super helpful. Now, this still wouldn't work even if we weren't using the function to define the user, and instead mapping it directly to username. Yeah.
Still no dice. To be honest, in most cases I think this is actually preferable, as it keeps you from accidentally mutating your state from a component without calling an action. But you might have a case where you actually want to mutate that state, such as when using it on an input with vModel. To accomplish that, Pina actually provides us another helper function.
That is the mapWritableState helper. Now, when we try things out in the browser. Sure enough, the username rendered next to the input updates when we type. Awesome.
Also, if we check out the state in the Auth User Store, it's updated as well. Finally, it's worth noting that the function approach we used a moment ago with map state, where we provided the greeting, wouldn't work with map writable state. In the browser, you can see that everything disappeared in the input. and even next to it as well.
Let's just change that back to get it working again. Lastly, I'll remove the input and change all of our writable states back to just map state, as it doesn't really serve a purpose for us.