- [Instructor] In this video
we'll create our first data store.
Let's open up our source folder
and then let's create a new file in our source folder called
store.js,
and let's start with a simple export, default,
and an object.
Inside here we'll create a state object
and within that I'll create a students list.
Let's save that.
Now let's open up our components folder
and open up our students component,
and I'll close this terminal to give us more space.
Now what we'll do is instead of saving our students
in a component state array,
as we can see here on line 24,
I'll save it in our data store.
So first let's begin by importing that data store.
Then let's set students on line 25
to store.state.students.
Let's save that and make sure there's no errors
and our web app is still functioning.
So we're currently saving our students
after we get them from the back-end into our data store.
And so now when we go to new student,
which also has the list of students
we can just get the data from the data store
instead of the back-end.
So let's open up new student.
We can see here that the new student component
does not actually get the students from the back-end,
but instead just includes the student component within it.
And so that student component, once again,
gets the data once it's created.
So to solve this we're going to need to move
this back-end call online 29 and place it somewhere
that only gets called once when our entire web app loads.
So let's cut line 29 and let's open up our app component.
We'll scroll to the bottom and below data
we'll add created
and then paste our call.
Now we'll need axios and we'll need the data store.
So let's go back to students
and copy both of these between line 19 and 20.
Let's paste them in after the three import calls.
Now since app view and store.js are on the same level
let's get rid of one of the dots from the import
and then since we're using an await inside our created
we'll need to set created to async.
We also don't have this.students, so we'll use
store.state.students.
Let's save that and see what happens,
and our web app loads, but students is empty,
but then if we go to the student list view
we're seeing the students
and if we go back to the new student view
we're seeing the students again.
So let's see what's happening.
If we go to our students component and just to debug this
we'll go above our card
and we'll put in two curly braces and then students.
Let's see what happens.
We can now see our student array, so let's refresh.
Notice that it's empty, but if we go to our network tab
we can see there is a call to students
and we are getting the students.
So what's going on?
If we refresh a few times and pay attention to the timing
we can see that the view is loaded before
the students arrive
nearly by a second.
And so we're rendering the data we have at the time
on the screen, which is just an empty array.
The problem is what we have is not reactive
and there are several ways to solve this,
but what we'll do is use the Vuex store instead.
We developed our own data store in this video
just so we can see how it works.
Notice that as I go back and forth between them
we are no longer downloading the students from the back-end
yet they are being shown in each view.
And so for the portion we were concerned with it is working
and now is a good point to introduce the Vuex store.
Let's take a look at that next.