Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,090 --> 00:00:06,060
In this lecture, I want to show you an alternative solution for mapping our store to be components.
2
00:00:06,090 --> 00:00:08,940
Currently I am viewing the header component.
3
00:00:08,970 --> 00:00:10,880
You do not need to follow along.
4
00:00:10,890 --> 00:00:12,870
It's perfectly fine to watch.
5
00:00:12,900 --> 00:00:19,380
Previously we imported the map store's function to help us access the state from the store.
6
00:00:19,410 --> 00:00:24,520
We haven't had the chance to talk about this yet, but stores can have functions.
7
00:00:24,540 --> 00:00:26,830
We're not limited to defining data.
8
00:00:26,850 --> 00:00:33,120
Functions can be added to the store to interact with the state by using the map store's function.
9
00:00:33,120 --> 00:00:35,680
Everything from the store will be accessible.
10
00:00:35,700 --> 00:00:38,820
In this example, we are not using functions.
11
00:00:38,820 --> 00:00:41,100
Only the data is being accessed.
12
00:00:41,100 --> 00:00:45,300
In this case, it may not be necessary to map the entire store.
13
00:00:45,330 --> 00:00:49,680
It's possible to only map the state from the import statement.
14
00:00:49,680 --> 00:00:55,530
I'm going to add two functions called map state and map writable state.
15
00:00:57,640 --> 00:01:00,680
Both functions will map the state to a component.
16
00:01:00,700 --> 00:01:03,360
There's one difference between both functions.
17
00:01:03,370 --> 00:01:07,120
The map state function will treat the state as read only.
18
00:01:07,150 --> 00:01:09,220
Updating the state is not allowed.
19
00:01:09,250 --> 00:01:14,360
If you were to browse the documentation, this process is known as mutation.
20
00:01:14,380 --> 00:01:19,260
Developers will use the words update and mutate interchangeably.
21
00:01:19,270 --> 00:01:24,190
They mean the same thing as for the map readable state function.
22
00:01:24,220 --> 00:01:27,220
This function will allow us to update the state.
23
00:01:27,280 --> 00:01:32,860
You may be wondering why would we want to use the map state function over the writable function?
24
00:01:32,890 --> 00:01:39,460
In some cases you may want to take extra steps from preventing state from being updated in a specific
25
00:01:39,460 --> 00:01:40,300
component.
26
00:01:40,330 --> 00:01:43,310
Not all components will need to update the state.
27
00:01:43,330 --> 00:01:44,860
Just read from it.
28
00:01:44,890 --> 00:01:48,880
Let's try using this function in the computed property.
29
00:01:48,880 --> 00:01:53,350
We can add the map writable state function with the spread operator.
30
00:01:55,470 --> 00:01:57,830
This function has two arguments.
31
00:01:57,840 --> 00:01:59,910
The first argument is the store.
32
00:01:59,940 --> 00:02:02,280
Let's pass in the modal store.
33
00:02:04,540 --> 00:02:08,919
The second argument is an array of state properties to grab the store.
34
00:02:08,949 --> 00:02:11,470
We do not need to grab all properties.
35
00:02:11,470 --> 00:02:14,140
Let's add the is open property.
36
00:02:16,360 --> 00:02:21,720
The arguments for the maps, state and map writable state functions are the same.
37
00:02:21,730 --> 00:02:23,870
You can swap one with the other.
38
00:02:23,890 --> 00:02:29,180
After mapping the state, the toggle off modal function will need to be updated.
39
00:02:29,200 --> 00:02:35,470
The state will not be accessible through the modal store object and said they will be accessible as
40
00:02:35,470 --> 00:02:36,360
properties.
41
00:02:36,370 --> 00:02:38,560
We can shorten this code to.
42
00:02:38,560 --> 00:02:41,440
This dot is open like so.
43
00:02:43,640 --> 00:02:46,520
This produces the same behavior as before.
44
00:02:46,550 --> 00:02:50,340
As you can see, mapping the state can make our code readable.
45
00:02:50,360 --> 00:02:54,190
You do not need to map the entire store for this course.
46
00:02:54,200 --> 00:02:56,190
The original solution was fine.
47
00:02:56,210 --> 00:02:59,600
I'm going to undo the changes I made in this lecture.
48
00:03:01,780 --> 00:03:03,010
In the next lecture.
49
00:03:03,010 --> 00:03:05,830
Let's keep talking about state management.
4451
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.