- [Instructor] Up until now we have been saving the data
we get back from our axios.get call
directly into the store.
This is typically not a good idea,
since it could cause several problems
such as when another piece of your code
is trying to access that store state.
And the View X documentation tells us
not to mutate the store state directly,
but instead to use mutaters.
So in this video we'll take a look at our first mutater,
and see how we can improve the way
we populate our students array.
Let's head over to our store.js
and below our getters, let's add mutations.
Then let's create a function called setStudents,
which will take in a state,
and then we can set state.students,
and we need to set it to something.
So we'll also need to pass in, besides state, students,
and then we'll set it to students.
Now let's go back to our app component,
and instead of setting the students from the state directly,
we will call this.store.commit,
and we'll pass in the name of the mutation
which is setStudents,
and we'll pass that as a string,
and then we'll pass in the students as the second parameter.
Since this is a little bit hard to read,
I'm going to take this line out,
create the local variable called students,
and paste that in.
And then I'll just pass in students.
Let's save that and give it a try.
Let's refresh our web app,
and we can see it's still working.
Next let's take a look
at how we would use mutations when adding a new student.