- [Instructor] State management is a huge part
of front end development
in today's world of web development.
The most popular architectures for managing states
make use of a central store.
Components subscribe to this store
for data and commute mutations to (indistinct),
to change data.
Our Explore California application uses Vuex,
which also makes use of the central store concept
for managing states.
Follow along with this video.
make sure that you are on the 04_04b branch of the project.
When we're logging into the application,
the user's data is committed to the store.
The application then navigates to the profile page.
On the profile page,
the profile components subscribes to the user data
using a computer property.
This piece of data referenced from the store is then used
in the page templates to display the user's info.
At this moment,
a state bug exists in the app,
which we'll use the Vue.js developer tools to inspect.
Let's log in to the application to find out what the bug is.
Can you guess what the bug is?
Try pausing the video for a few seconds,
if you are yet to figure it out.
Yup. The user data is not available on this page.
So what might be causing this?
Is a subscription to the store broken?
Let's move back to the login page
and pull up the view there too.
Switch to the Vuex section
so that we can inspect the mutations.
Which you'll see the set user mutation called in here
when we log in.
Let's log in once again.
Okay, wait a second.
No mutation is being recorded to the Vue.js dev tools.
This shows that our set user mutation,
which commits the user info to the store,
is not being called,
but a call is right there in our code.
What could be the issue?
Back in the log in function in the onboard view component,
let's check the line that caused the mutation.
By observing the name of the mutation,
it seems we have a typo here.
Let's check the store to confirm
Yup.
The mutation to be called is setUser camel case.
What we have in the code is misspelled.
This is a very common issue
when working with state mutation.
Let's go back and fix it.
Back in the login function,
replaced the misspelled mutation name
with the appropriate name.
Now save the file
and switch back to the browser to login again.
Here in the browser,
make sure that the VueJS developer tools is still open
and on the Vuex tab.
Now let's log in again with our credentials.
Our bug appears to be fixed
and we have the user data available
on the profile page as it should be.
If you look at the Vuex inspector,
notice that the mutation is recorded,
meaning that our mutation is now being called.
The Vuex section of the Vue.js developer tools
provides clear visibility
into our state changes are taking place.
This in turn helps us
to properly debug the changes in our applications.