- [Instructor] In this video, we'll get Vuex set up
and replace our custom data store we had built earlier.
If we head over to the Vuex website,
you can then select Installation
and we can see the NPM command to install it.
We'll copy that and open up a new terminal window
and let's install it.
Now, let's go over to our store.js
and make the appropriate changes.
At the top, we'll start with the Vuex import.
Then we need to let Vue know that we wish to use Vuex.
So, let's import Vue as well.
Now, below both those imports, we'll use Vue.use(Vuex);
and then instead of simply exporting a basic object,
we'll export a new Vuex.Store
and we'll pass in our existing object
into the store function.
Let's save that.
Now, let's go back into our students component
and modify our component to use the new Vuex Store.
We can first get rid of the import on line 21.
The last thing we'll need to do
is import our store.js somewhere
since we just removed it from students.
So, let's open our main.js
and we can import it after the router.
And then finally, let's tell Vue to use it.
So, at the bottom, above our router, on line 25,
let's add our store.
Now, let's go back to our students component
and instead of having a students component state,
we'll just access it directly from our store.
So, on line nine, instead of students,
I'll use $store.state.students
and then I can get rid of line 25.
And I'll also get rid of the students we're referencing
on line three.
Let's save that and give it a try.
And as we can see, our students are showing up.
Even when we do a page refresh, they instantly show.
And if we go back and forth between the different views,
we're still only making that single initial students call
to the backend.
Next, let's take a look at a helper called mapState.