- [Instructor] Vuex is a state management library
that helps us separate what's happening
with your data on a different section of your application.
Now if you're familiar
with the model-view-controller architecture where the model,
which is also the data, is separate from the view,
the view is what we call the template,
and then the controller is the thing
that hooks them all together, we're doing this with Vue.
So in our application, we have the template,
and we have the controller part, but we're really managing
data manually by using patterns.
So Vuex is going to allow us to create
a separate place for all that management to happen.
And where it's going to be really useful
is when you have a ton of different components
because it makes it easier for subcomponents
to have direct access to the data.
So let's take a look at how that's implemented
in the next few videos.
We're going to start by installing the library.
So I'm going to say, npm install save and vuex.
Once we do that, we have access to the library,
and typically, you want the entire store
or the entire state of the data
to be available to your whole application.
So whenever we want to do something
that is available everywhere,
we put it in this main.js file.
And what I'm going to do is create
another file right here in my source folder.
I'm going to call it store.js.
And this is going to have all of the methods
and all of the properties and state of our data,
but we'll need to bring this store.js file into main.js,
so we'll use another import statement here.
And we will import store from store.js,
and we can put that anywhere.
Let's go ahead and add it, let's see,
right here and separate it a little bit
from everything else that's going on.
Also to make it available to our entire Vue instance,
we'll need to go ahead and place the store right here.
So now, this is import that we get from this file
is going to be added into our Vue application.
So let's go ahead and save that
and let's go now into store.js
and start importing the components that we need.
So I'm going to say import Vue from "vue",
and I'm also going to need, of course,
Vuex that we just installed from "vuex".
And because I know I'm going to be using some data,
I'm also going to import axios in here.
So you will do all of your traditional imports here.
And then what we want to do is tell the Vue library
to go ahead and use the Vuex library.
So we're expanding the Vue library with Vuex.
Now, we need to do an export.
So this is just regular JavaScript.
Our export is going to be a new Vuex instance.
And we want to use the Store method.
And this is similar to what you do with Vue itself.
We're going to pass along a configuration object
where we do everything we need to for our application.
And what you want to do here is define a number of things.
So if we go back into the documentation,
you'll see that the way that state management works
is by creating your own version of state
and then having actions that allow you
to get to that state that are tied directly into your views.
So you have all these concepts
of creating ways to access that data.
Those are called getters.
You can also modify that data through mutations
and also have methods that can also modify
or work through the mutations to change the data,
which are called actions.
There are other things that you can do in here.
This is quite a complex library,
so the documentation's pretty good.
And we do have some courses.
Make sure that if you really want to go deep into Vuex,
that you take a look in our library and search for Vuex.
But let's take a look at how we can implement this in here.
So first I'm going to create a state inside my Vuex library.
And I'm going to add what I have in my normal application.
I'm going to add an array of songs,
and then I'm going to have a current song in here as well,
which I will initialize as null.
We're going to leave the audio element in app.vue.
It's something that is
generating an HTML element dynamically.
So, we'll keep it there.
And then in addition to that, you want to create
a series of different methods.
So just like with regular Vue applications,
you have all these different pieces
that you need to worry about.
You have, for example, the data section.
You have methods.
And then you have components,
and then we have lifecycle event.
A similar thing is going to happen in your store.
We have our state right now, and we want to create mutations
for when we need to modify some data in our application.
So I'm going to create one mutation.
It's going to be called SET_SONGS.
So this is what's going to modify our list of songs.
So this is going to receive the current state
and also something to change,
which I'm going to be calling the payload.
I like to call things payload when it's something
that the method is receiving.
I think it's sort of clear.
And then, what I'm going to do here
is in the current state look for the songs array
and then set it to whatever we pass
to this mutation called payload.
In addition to mutations, we can also create
a series of actions.
And actions are like our Methods section in App.vue
that allow us to run a series of functions
that can use the mutations to modify a state.
And this is sort of a little bit peculiar about Vuex,
that you don't directly modify a state.
You create an action that runs a mutation
that modifies a state.
So it's a little odd, but it's the way that it works.
So what I'm going to do here is create in this section
called actions, something called fetchSongs.
And fetchSongs is going to be a method that expects
some sort of commit messenger.
It expects sort of like a payload, but it's called a commit.
And what we can do here is do our regular axios call
like we would normally.
So I'm just going to copy that from our App.vue file.
So right now, if I open up created,
I have this axios call.
And I have all this code right here,
so I'm going to cut that out of there.
And then go back into store.js and just paste the call
to our API and do the same thing that we've done here,
except that when I receive the response,
I'm going to run things a little bit differently.
So let me take this out.
And what I'll do is issue a commit message
and this commit message is going to execute a mutation
that we called SET_SONGS and as the payload,
we'll pass along the response.data.
So this is doing the same thing that our created method
was taking care of before, but in the language of Vuex.
So, let's go ahead and save that.
And now in our App.vue file, in our created method,
all we need to do is access this store,
so we're going to use this method
and then use the store variable.
So whenever you see a dollar sign like this,
it means that you're trying to access something
that is available in the entire application,
and we are accessing that store object
that we defined in main.js.
And then in here, we're going to dispatch,
and again, this is just the language of Vuex,
we're going to dispatch the action called fetchSongs
that we created earlier.
I need to modify this data because I don't
want to have a local version of the songs
and the currentSong.
I want to receive that from our store.
To do that, I'm going to need to import
an additional library.
And this is called mapState.
So mapState is a shortcut that allows us
to take the current state from the Vuex store
and map it to things in our current location.
So this is going to say import mapState from "vuex".
Great, and we're going to add an addition
to data, methods, created.
There's another property that we can
add here called computed.
Computed is where you can create calculations that
will create a variable that can change your data.
And here we're going to use
the mapState method that we called, and we're going to take
the variables that are stored in the stores's state
called songs as well as currentSong.
So this mapState essentially goes into our store
and takes the state of songs and currentSongs.
And if you had more variables here,
then, in App.vue, you could add them to the list here.
And it essentially will now create
the currentSong variable as well as the songs variable.
So we don't need them in our data anymore.
And we have the method in our store
that is retrieving the songs
and feeding them into our songs array.
And you can see that it is still working in the same way,
it's just that we're doing things in a different structure.
So you may be asking yourself,
is this a better way than what you were already doing?
And the reasons for using Vuex over your regular way
of managing state is that it does give you access
from any component.
And as your applications get bigger,
you're going to notice that you'll have components
inside of components.
And typically what you end up doing
if you want to modify state is targeting
the parent component or the root component
and having to send events as well as data modifications
throughout the entire outline of your application.
With something like Vuex, you are able to execute methods
directly from your subcomponents that can modify your data,
and that can be really useful sometimes.