- [Instructor] In this video,
we'll take a look at Vuex modules.
Above our Vuex.Store definition on line seven,
let's create a new constant.
I'll call it errorSystem,
and then let's set it to an object that contains a state,
and what we'll do is just take showError and errorText,
out of our default Vuex.Store,
and move it into our errorSystem.
Then let's scroll down,
and cut the showError mutation between line 36 and line 39.
And now let's add a mutations to our errorSystem,
and paste that in.
Then let's go down to our default Vuex.Store,
and below actions let's add modules.
Then I'll create the module called error,
and I'll set it to errorSystem.
Now let's open up the app component.
So we can make changes to the snackbar
to reflect our new module.
In order to use our new module
we just need to put the module name in front of the state.
So we've called it error, and I'll do that on line 12 also.
Let's save that and give it a try.
And in order to try this out,
the backend server will have to be shut down.
So let's refresh the web app.
And we can see the error.
So our new module's working.
There's one quick change I'd like to make.
Because our module is called error,
it seems a bit redundant to have error.showError,
instead error.show is a lot better,
so, let's make those changes.
Same for text, we can just have error.text.
So I'll save that,
and then let's make the modifications to our module.
So I'll change that to state.show and state.text,
and the same above, to just show and text.
Let's save that and make sure it's still working.
So if we refresh, you should still see the error.