- [Instructor] In this video, we'll create a data store
which our components can save data into,
and our other components can read data from,
creating a centralized object that handles our data for us.
Before we get started, make sure your server is running
since we had shut it down in the previous video.
And then let's head over to our front end project.
In here, let's create a new file
under our source folder, called store.js.
Then in here, let's create a new object called state.
And then we'll create the messages property
that's set to an empty array.
And now let's add just two, simple placeholder messages.
Save that.
And then let's import our new store
into our messages component.
And since this is located above the components folder
and in our source folder, we use ../store.js
to access it.
Now as a simple test, we'll try to get our messages
and display them from the store,
instead of from the back end.
So I'll comment out
line 33 as a test.
And then on line 24,
I'll initialize it with store.state.messages.
And finally, in order to access our store,
we'll need to export it.
So we'll use export default,
and wrap everything.
So I'll save that and give it a try.
So when our app refreshes, we can see that the messages
are loading from the store.
So since that test works,
let's go ahead and remove these test messages
and just have an empty array.
Now back in our messages component.
Next, let's set the messages we get from the back end
into our store.
So I'll copy part of line 24
and paste it
into line 33.
And so now we'll set store.state.messages
to the data we get back from our messages call.
Instead of accessing messages from our data
in our for loop,
we can access store.state.messages directly.
So let's copy what we have here on line 24
and paste it over messages on line eight.
And then all we need is a way to access our store.
So I'll replace line 24 with store.
And this is actually short form for this syntax
which takes our imported store
and exposes it to our data which then allows our for loop
to access the messages through this state,
through the store.
So I'll go back to the short form.
And let's give that a try.
Then we can see our messages are displaying.
So it's working just like before
when we didn't have our store,
so what is the advantage of having a store?
Well, the next thing we'll look at
is actually posting a new message,
and then posting that message response
directly into the store, removing the need
to actually having to admit an event.
So let's open up our new messages component.
And from our messages component,
let's copy the import store code on line 19
and paste that on line 23 in our new messages component.
Then, let's get rid of our admit call on line 38,
and instead, we'll use store.state.messages.push.
And we'll push in the new message.
So let's give that a try.
So I'll type in a new message and hit submit.
And we can see it's now showing up in our messages list
and it's also been posted to the back end.
So since we're no longer admitting an event,
we don't need to listen for it any longer.
So in our messages component,
we can go down and remove line 29 through line 31.
And let's give it another try to make sure
that it didn't break anything.
And it's still working.
So we've now seen how to maintain
the same user experience of posting a new message
and having it show up instantly in our messages list
if it did post in the back end
without using component to component communication
or admitting and listening to events.
And we've done that simply
by having a centralized data store.
Now instead of rolling our our own data store,
we can use something like Vuex,
which is Vue's version of a state management pattern
and library following the Flux pattern.
Which if you've used React before,
you might have experienced Redux.
Don't worry if you've never used anything like this before,
I'll guide you through it in the next video.