Original subtitles

In this lecture, I want to show you an alternative solution for mapping our store to be components.

Currently I am viewing the header component.

You do not need to follow along.

It's perfectly fine to watch.

Previously we imported the map store's function to help us access the state from the store.

We haven't had the chance to talk about this yet, but stores can have functions.

We're not limited to defining data.

Functions can be added to the store to interact with the state by using the map store's function.

Everything from the store will be accessible.

In this example, we are not using functions.

Only the data is being accessed.

In this case, it may not be necessary to map the entire store.

It's possible to only map the state from the import statement.

I'm going to add two functions called map state and map writable state.

Both functions will map the state to a component.

There's one difference between both functions.

The map state function will treat the state as read only.

Updating the state is not allowed.

If you were to browse the documentation, this process is known as mutation.

Developers will use the words update and mutate interchangeably.

They mean the same thing as for the map readable state function.

This function will allow us to update the state.

You may be wondering why would we want to use the map state function over the writable function?

In some cases you may want to take extra steps from preventing state from being updated in a specific

component.

Not all components will need to update the state.

Just read from it.

Let's try using this function in the computed property.

We can add the map writable state function with the spread operator.

This function has two arguments.

The first argument is the store.

Let's pass in the modal store.

The second argument is an array of state properties to grab the store.

We do not need to grab all properties.

Let's add the is open property.

The arguments for the maps, state and map writable state functions are the same.

You can swap one with the other.

After mapping the state, the toggle off modal function will need to be updated.

The state will not be accessible through the modal store object and said they will be accessible as

properties.

We can shorten this code to.

This dot is open like so.

This produces the same behavior as before.

As you can see, mapping the state can make our code readable.

You do not need to map the entire store for this course.

The original solution was fine.

I'm going to undo the changes I made in this lecture.

In the next lecture.

Let's keep talking about state management.