Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,120 --> 00:00:05,810
The objective of this lecture is to create a getter for the is open state property.
2
00:00:05,820 --> 00:00:10,800
We'll need to create one because the motor will use it to decide whether it should be visible.
3
00:00:11,010 --> 00:00:13,620
The next step is to make it appear on the page.
4
00:00:13,620 --> 00:00:15,930
By default, it's hidden from view.
5
00:00:15,960 --> 00:00:19,150
We're going to toggle tailwind classes on the modal.
6
00:00:19,170 --> 00:00:24,110
Currently, the hidden class is on the route element of the off component.
7
00:00:24,120 --> 00:00:25,650
This class should be added.
8
00:00:25,650 --> 00:00:28,560
If the modal should be invisible, we'll remove it.
9
00:00:28,560 --> 00:00:34,620
If the log and register link is clicked by default, we'll add the hidden class to the modal.
10
00:00:34,650 --> 00:00:39,150
We're going to use the IS Open State property to toggle the class.
11
00:00:39,360 --> 00:00:41,460
This is where getters come into play.
12
00:00:41,820 --> 00:00:45,210
Getters are a way to retrieve a state properties value.
13
00:00:45,240 --> 00:00:49,350
Let's switch over to the store file and create our first getter.
14
00:00:51,730 --> 00:00:53,560
Inside the store object.
15
00:00:53,560 --> 00:00:56,080
Add another object called Getters.
16
00:00:58,340 --> 00:01:02,830
The Getters object is where we must define getter functions.
17
00:01:02,840 --> 00:01:08,000
Inside this object, we're going to create a function called Hidden Class.
18
00:01:10,320 --> 00:01:10,980
All right.
19
00:01:10,980 --> 00:01:14,490
Inside this function, we have to return a value.
20
00:01:14,520 --> 00:01:17,460
Getter functions are required to return a value.
21
00:01:17,460 --> 00:01:22,020
For this example, our getter function should return the hidden class.
22
00:01:22,020 --> 00:01:28,050
If the is open property is truthfully, the class should be applied to our elements.
23
00:01:28,050 --> 00:01:31,140
Otherwise an empty string will be returned.
24
00:01:31,170 --> 00:01:35,970
Every getter function is provided the state which we can accept as a parameter.
25
00:01:40,710 --> 00:01:48,240
After accepting the state return the following value not state dot is open question mark.
26
00:01:48,240 --> 00:01:50,520
Hidden colon empty string.
27
00:01:52,670 --> 00:01:54,290
The getter function is ready.
28
00:01:54,320 --> 00:01:58,440
Getter functions are exposed to the components in our application.
29
00:01:58,460 --> 00:02:03,230
The next step is to use the getter function inside the authentication component.
30
00:02:03,260 --> 00:02:04,850
We'll switch over to it.
31
00:02:04,880 --> 00:02:10,100
Getter functions should be added as computed properties similar to the store.
32
00:02:10,100 --> 00:02:14,310
We can map getter functions into a component's computed properties.
33
00:02:14,330 --> 00:02:18,430
First, let's import the store in the script block.
34
00:02:18,440 --> 00:02:21,680
Import the modal store with the following name.
35
00:02:21,680 --> 00:02:23,540
Use modal store.
36
00:02:25,640 --> 00:02:30,260
Next import the map state function from the linea package.
37
00:02:32,410 --> 00:02:35,920
The map state function can map getter functions.
38
00:02:35,920 --> 00:02:38,620
It's not exclusive to state properties.
39
00:02:38,620 --> 00:02:44,290
Let's try using it in the components, options and the computed object.
40
00:02:46,350 --> 00:02:51,420
Within the object called the map state function with the spread operator.
41
00:02:53,590 --> 00:02:55,420
Pass in the modal store.
42
00:02:57,460 --> 00:02:59,500
Lastly, add an array.
43
00:02:59,530 --> 00:03:03,250
The name of the getter function was called Hidden Class.
44
00:03:05,350 --> 00:03:06,170
That's it.
45
00:03:06,190 --> 00:03:09,310
We've exposed the getter function to our component.
46
00:03:09,340 --> 00:03:15,460
You may be wondering, couldn't we have defined the hidden class computed property directly in the component?
47
00:03:15,490 --> 00:03:20,620
That's definitely possible and allowed by outsourcing the logic to the store.
48
00:03:20,650 --> 00:03:23,530
The function can be mapped to any component.
49
00:03:23,560 --> 00:03:28,150
Otherwise, the function would have been only available in the off component.
50
00:03:28,360 --> 00:03:31,570
We'll want to hook the computed property to the modal.
51
00:03:31,570 --> 00:03:36,980
Scroll up to the template block on the div element with the ID of Modal.
52
00:03:37,000 --> 00:03:40,930
We're going to bind a class attribute separate from the first one.
53
00:03:43,070 --> 00:03:45,680
The class attributes will be merged.
54
00:03:45,710 --> 00:03:49,790
We're going to set the condition to the following Hidden class.
55
00:03:52,330 --> 00:03:54,090
Time to check if this works.
56
00:03:54,100 --> 00:03:55,540
Switch to the browser.
57
00:03:55,570 --> 00:03:59,290
If I were to click on the login button, the modal would appear.
58
00:04:01,280 --> 00:04:02,520
Fantastic.
59
00:04:02,540 --> 00:04:04,630
We've successfully opened the model.
60
00:04:04,640 --> 00:04:06,510
Sadly, we can't close it.
61
00:04:06,530 --> 00:04:09,230
We'll handle this problem in the next lecture.
5562
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.