Original subtitles

The objective of this lecture is to create a getter for the is open state property.

We'll need to create one because the motor will use it to decide whether it should be visible.

The next step is to make it appear on the page.

By default, it's hidden from view.

We're going to toggle tailwind classes on the modal.

Currently, the hidden class is on the route element of the off component.

This class should be added.

If the modal should be invisible, we'll remove it.

If the log and register link is clicked by default, we'll add the hidden class to the modal.

We're going to use the IS Open State property to toggle the class.

This is where getters come into play.

Getters are a way to retrieve a state properties value.

Let's switch over to the store file and create our first getter.

Inside the store object.

Add another object called Getters.

The Getters object is where we must define getter functions.

Inside this object, we're going to create a function called Hidden Class.

All right.

Inside this function, we have to return a value.

Getter functions are required to return a value.

For this example, our getter function should return the hidden class.

If the is open property is truthfully, the class should be applied to our elements.

Otherwise an empty string will be returned.

Every getter function is provided the state which we can accept as a parameter.

After accepting the state return the following value not state dot is open question mark.

Hidden colon empty string.

The getter function is ready.

Getter functions are exposed to the components in our application.

The next step is to use the getter function inside the authentication component.

We'll switch over to it.

Getter functions should be added as computed properties similar to the store.

We can map getter functions into a component's computed properties.

First, let's import the store in the script block.

Import the modal store with the following name.

Use modal store.

Next import the map state function from the linea package.

The map state function can map getter functions.

It's not exclusive to state properties.

Let's try using it in the components, options and the computed object.

Within the object called the map state function with the spread operator.

Pass in the modal store.

Lastly, add an array.

The name of the getter function was called Hidden Class.

That's it.

We've exposed the getter function to our component.

You may be wondering, couldn't we have defined the hidden class computed property directly in the component?

That's definitely possible and allowed by outsourcing the logic to the store.

The function can be mapped to any component.

Otherwise, the function would have been only available in the off component.

We'll want to hook the computed property to the modal.

Scroll up to the template block on the div element with the ID of Modal.

We're going to bind a class attribute separate from the first one.

The class attributes will be merged.

We're going to set the condition to the following Hidden class.

Time to check if this works.

Switch to the browser.

If I were to click on the login button, the modal would appear.

Fantastic.

We've successfully opened the model.

Sadly, we can't close it.

We'll handle this problem in the next lecture.