- [Instructor] Up until now
we have been making all of our axios post calls
and put calls directly in the components themselves,
such as, in our NewStudent component, on line 40,
our App component on line 34 where we get all our students,
and on line 53 in our EditStudent component.
It would be much better if our components
only had the responsibility of component logic
such as user interface and interacting with the Store.
Therefore it would be much better
if the Store handled all of the axios calls for us.
So let's take a look at how to do that.
And speaking of specific responsibilities,
mutations should only be responsible
for modifying the state.
In fact, they don't work very well with asynchronous calls.
So we can't actually have
any axios calls inside our mutations.
To do that we'll have to add actions.
So below mutations I'll add actions,
and let's add our first action.
I'll call it getStudents,
and it'll be a function that has to take in a context.
We'll see why shortly.
Let's go over to the App component,
and then let's copy line 34,
and let's paste into our getStudents action.
Now below that, we can call context.commit,
and then specify the mutation name,
in this case, setStudents, and then we can pass in students.
Let's save that, then go back to our App component,
and then we can replace both line 34 and line 35,
with a store.dispatch which we'll call in action.
So I'll use this.$store.dispatch,
and I'll call our new action called getStudents.
But before we give this a try, let's go back to Store,
and as you can see we're using await on line 27,
therefore our getStudents function needs to be async.
And we will also need to import axios,
since we're using it on line 27.
So we'll go back to our App component, scroll to the top,
and we can cut line 18 since we no longer have a dependency
in our App component to axios.
Go back to our Store,
and import it on line three.
Let's save those and give it a try.
And if we refresh
we can see we're getting all of our students.
So now that we're able to get our students,
next let's take a look at how to use actions
in order to edit and create a new student.