Using Pina actions with the options API is just as simple as accessing state or getters in the options API. Let me show you how it's done. In the auth user store, I'll create an action called visit Twitter profile, and it will just open a new tab to the Twitter profile that corresponds to our username. view, let's import the map actions helper from Pina.
This time, we'll want to call mapActions under the methods option, pass it the useAuthUserStore function, and specify which action we want to expose as a method. And I think ESLint is complaining about the order of computed and methods, so let's just move methods below computed. Cool, that's better. I'm not sure why it didn't do that automatically for me, but whatever.
So, Now that we've exposed Visit Twitter Profile, let's now call it onClick of our username. Now in the browser, after I give the page a refresh and click on my username, sure enough, it opens up a new tab and takes me to my Twitter profile. Sweet. Now, this probably wasn't the best approach for linking to Twitter.
It's certainly not accessible, that is, Ally accessible. and we don't get some out-of-the-box styles that we'd get if we just used an anchor tag. But it works, and you get the point. All right, finally, it's worth mentioning that just like with MapState, you could also use an object in order to rename the action.
Easy enough. All right, that does it for using Pina with the Options API. Everything else works just as it did with the Composition API. So now you'll be ready to switch between the two, if necessary.