- [Instructor] In this video, we'll get a quick introduction
to Vuex, which will replace our existing data store
that we created in the last video.
Let's head over to the front-end project
and let's open up a new terminal.
We'll need to install Vuex,
so we'll use npm install vuex --save.
After installing Vuex, let's go over to our store.js
from
vuex.
And in order to tell Vue that we'd like to use Vuex,
we need to call Vue.use
and pass in Vuex.
But in order to access Vue, we'll need to import that also.
So above our first import call, we'll add another import,
Vue
from vue.
And I'll close the terminal
just to get some more screen space.
Next, I'll wrap the object we're exporting with new
Vuex.Store
and I'll pass in the object to that function.
Now, let's save that and open up our Messages component.
And since we're using Vuex, we no longer need to import
store.js, so I'll delete line 19.
I'll also remove our declaration on line 23.
And we can now access the store through this.
So on line 27, I'll use this.$store.
Let's go ahead and make those same changes
to our NewMessage component.
So I'll delete line 23
and then on line 37, I'll add this.$store.
And back in our Messages component, on line eight,
we'll need to add a dollar sign to the front of store
in our for loop.
So now, both of our components are using the Vuex store.
But store.js is not being imported
by any component any longer.
So to make use of our store.js,
let's go over to our main.js and import it there.
And then let's add it to our Vue initialization on line 11.
So right below that, I'll pass in store
and then add a comma.
Let's save that and give it a try.
So if we refresh, we can see all of our messages
are still loading.
one stating that we should not be modifying
our state directly.
In order to modify it,
we'll need to do that through a mutation,
which we define inside the store.
So after state, let's add a new object called mutations.
And let's see how this works.
So I'll begin by adding a mutation for posts,
which takes in state
and the messages that we're going to be passing in.
And inside here, we can simply set state.messages
to messages.
Now, if we'd like to commit any changes
to our messages state, we can do that through mutations.
So let's go to our Messages component
and in here, instead of accessing the state directly
and setting it, we'll use store.commit
and we'll specify the name of the mutation.
In this case, it's posts.
And then we'll supply the data or our messages in this case
as the second parameter.
And if this is a bit confusing, what we'll do
is create a variable called messages
and set that to the await.data.
Then I'll pass in messages.
And that looks a bit cleaner.
If we save that and give it a try and refresh our app,
So let's create a similar mutation
for adding a new message.
So back in our store.js,
we'll add a new mutation called newMessage.
Then I'll pass in state
and the message.
Now, in here, I'll use state.messages.push
and I'll push in the new message.
Now, back in our NewMessage component,
instead of pushing it here manually,
I'll use store.commit
and pass in the name of the mutation, which is newMessage,
as we can see here on line 14,
and then I'll pass in msg.message.
Let's save this and give it a try.
So I'll hit Submit and now, we can see our new message.
Just to stay consistent, I'll rename
the first mutation on line 11 to updateMessages.
And I'll need to update the call as well
inside our Messages component on line 28.
We'll refresh just to make sure it still works.
The final Vuex concept I'd like to look at is actions.
As we are currently
making all of our HTTP requests
inside the components,
instead, we could be doing that inside our store.
So below mutations, we'll add a new object called actions.
And inside here, we can perform any actions
beyond just modifying the state,
which is solely the responsibility of mutations.
Specifically, actions can be used
to perform asynchronous actions,
such as making HTTP get and post requests.
So let's create a new function called getMessages.
So now, let's go over to our Messages component
and cut line 27 out.
And back in our store,
we'll paste it in our getMessages function.
So now, we have our messages
and we'll need to commit them to our mutations,
so we can pass in commit.
That way, we can call in commit
with the name of the mutation, which is updateMessages,
and pass in our messages.
Let's save that and then back in our component,
we can replace line 27 with this.store.dispatch,
which will allow us to call an action.
In this case, the action called getMessages.
And finally, we'll need to modify our getMessages function
in our actions, since we're using await.
So we'll need to add async to the front.
but we don't have Axios imported here.
So I'll go back to our Messages component
and cut out line 18, since we no longer need it here.
And I'll paste it
below our other imports.
Let's save that and give it a try.
So if we refresh,
we can see we're getting all of our messages.
And our Message component looks a lot cleaner.
I'll get rid of this data function,
since we don't need any local states in this component,
since now our Vuex store is handling most of that.
Let's make the same updates to NewMessage.
So in our NewMessage component, let's copy line 37,
then modify it
with .dispatch,
with the name of the action,
which doesn't exist yet, but I'll call it newMessage,
and then we'll pass in the message.
Now, back in our store, let's add a new action.
We know this needs to be async as well.
So now, we need to make our Axios call.
So I'll go back to the NewMessage component
and copy the Axios call between line 33 and line 35,
and let's paste it in our action.
Then we can simply call
commit
with the mutation name newMessage
and pass in the msg.message.
The only modification we need to make
is to get access to the message text,
which before, we had through the messageBody
property,
which was our messageBody field.
Now, we no longer have access to that inside store,
so we'll have to pass it in to our action.
And so we'll get it back as a parameter.
So we'll add a second parameter called msg.
And now, in our NewMessage component,
instead of calling store.commit,
we can call store.dispatch
with the newMessage action.
And in here, we'll have to pass the message text,
which will be this.messageBody.
We'll need to make a quick fix to our store,
since we already have an msg variable being passed in.
We'll rename this to messageBody.
And then I'll modify line 26
and just pass in messageBody.
So let's give that a try.
So I'll submit a new message
and we can see it's being displayed.
So this was a very quick introduction to Vuex.
There's a lot more to it
and if you'd like to learn more about it,
you can check out my upcoming course, Learning Vuex.
But overall, now using the Vuex store,
both our components have less responsibilities,
since they're no longer dealing with HTTP gets and posts,
and managing states.
They now simply deal with user interface
and dispatching some sort of action request
to the Vuex store.
Next, let's take a look at how to handle errors
a bit more smoothly.