- [Instructor] In this video, we will be creating
an error system that lets us know
if there's any problems with the backend server.
To do that, we will use all of the knowledge
we have used thus far with Vuex.
We will get the system working
and then we'll learn how to eventually move it
into its own module so that it's kept separate
from the rest of our web app.
Let's begin by opening up our app component.
Inside our app component, we'll implement a snackbar,
which is a sort of notification that Vuetify provides us.
So below v content on line 10, let's add v
snackbar.
And I'll set v model to show error
and then I'll close the snackbar.
Now in our data, let's add show error.
And I'll set that to true so we can see it
by default for now.
Then I'll add some generic text.
Let's save that and give it a try.
And if I refresh, we can see the error.
And it should disappear after a few seconds by default.
Now, instead of this generic error,
let's create another property
in our data for that error text.
And I'll set this to error by default.
Then I'll get rid of the placeholder text on line 12
and I'll add two curly braces and I'll add our error text.
Let's take a look at that.
Now that we know it's working, I'll set show error to false.
And now, if we go into our store,
and we try to call an action and we get back an error,
I'd like us to show the error with the snackbar.
But the problem is how do we access
the error system's state that's located
in the app component from the store?
The solution is to move the state to the store, of course.
So, I'll take both properties from our component data
and I'll move them below our students array
in our store state.
I'll save that and let's go back to our app component.
Now, for the error text, we can access it
through store.state.errorText and the same for show error.
Then we can go back to our store and create a mutation.
I'll call it show error
and it'll take in a message.
So we'll simply use state.showError and set that to true.
And after the default amount of time,
it'll reset back to false.
And then I'll use state.errorText and set that to message.
And now we can try and use it.
So inside our get students action, we'll create a try-catch
and let's move what we have within the try
and then in our catch we can call context.commit
show
error
and we can pass the error.
Let's save this, then let's open up our terminal,
and shut down our backend.
Now let's reload.
And now we can see our error message.
Next, let's take a look at separating
this error system from the rest of what we have
inside our Vuex store into its own module.