All language subtitles for 012 Pinia Hooks_en

In this lecture, we're going to use penny hooks from within our components.

Believe it or not, Peneha has vast support for the composition API.

Most examples from the documentation will utilize the composition API over the options API.

It's incredibly easy to use these state getters and actions from within a store to get started.

Let's review the configuration for the store in our project inside the store's directory, open the

counter JS file.

Inside the store, we have a state property getter function and action function.

The goal of this lecture is to use the state getter and action function from within the about component.

We do not have to register peneha with the application.

I have taken care of that step for you.

Open the about component.

At the top of the script.

BLOCK We can import the store like we usually would.

Next in the setup function.

Define a variable called store.

Its value will be the used counter store function.

Just like that.

We have access to the store from within the component.

It's that simple.

The store exported by the file will be a function we can call this function to gain access to the state

properties, getters and actions from within the store.

Let's try using these values at the end of the function.

Return an object with the store variable.

Next.

Inside the templates, add a paragraph tag.

Let's output the store counter property.

Add another paragraph element.

This time output the double count getter.

Lastly, add a button with dummy text.

On the button element at the Click Event Listener with the Prevent Modifier.

If this event is triggered, we're going to run the increment action function.

That's it.

Let's try testing our work by refreshing the page in the browser.

As you can see, the application is completely functional.

We can press the button to run the increment action.

As we do so, the state and getter properties are updated.

Admittedly, using Peneha with the composition API is easier than using it with the options API.

Previously we had to map these values with the composition API.

It was simple as calling a function and returning the store.

You may prefer the composition API over the options API.

For this reason, in the next lecture, let's continue our discussion of the composition API.