- [Instructor] This new version of the application
isn't quite working
and that's because I can't really set the value
of the current song quite right
and our deletion's not going to work.
Everything is sort of jumbled
in between the two ways of dealing with state.
So I'm going to go into store.js
and create another mutation.
So right after set songs,
I'm going to create one called,
change
current
song.
It's going to get state as well as a payload
and what we're going to do here is,
we'll take and set the current song in the state in ViewX
to whatever we get here.
Now, that means that we're also going to need an action
that takes care of this.
So, we'll create an action called, change song.
It's going to receive a commit,
as well as a payload.
And then using that commit,
we're going to execute the mutation called,
change current song
and pass along the payload that we receive.
So as you can probably notice,
a lot of people write mutations in all caps.
You can make them camel case if you want to,
but it's sort of a conventional in ViewX.
All right, we're also going to write a method
that is going to delete some songs.
So, we've got this,
fetch songs, change songs,
and then we'll do another one
that will be a method for delete song.
Again, it's going to need to commit and a payload.
And here, we'll need a comma here.
And then in here,
I'm going to use the without function from Lowdash
to create a new array,
using the songs
and it'll extract whatever payload we pass through this
from those songs.
And then of course, I can issue a commit message
using the same mutation called, set songs
to set the songs
to this new songs variable.
So, this is a place where we have used the same mutation
and two different actions,
which is pretty common.
Okay, this means that we do have to import Lodash in here.
But that also means that you can remove it from here,
so we actually don't need this font awesome icon
and we don't need Lodash anymore.
And I don't think we need axios anymore.
So, you can see how putting all of the data related stuff
in a separate file is actually going to help us a bit.
Now that we have those two different actions,
we can use them in our application.
Here, where we would handle the deleting of an element,
all we have to do,
is use this store
and dispatch our delete song action here
with the payload which will be the current song.
You can see that this makes this handle delete method
a lot easier to write.
And that means that we can also use a similar process
to modify the current song.
So for example here,
we're going to dispatch the change song method
and pass along null,
so that will do the same thing as it did before.
And I'm going to copy this one.
And of course, right here,
where I'm setting the current song to the payload,
I would need to do this same thing.
And looks like there's one more thing
I need to get rid of here.
I'm not using this font awesome component here anymore,
so let's get rid of it.
And let's save that.
And you can see that our application is working
just as well.
(upbeat music)
And everything else is working fine,
so really, ViewX is just a different way of doing things.
I think you can see that it simplifies the way
that you write your code
and it puts everything related to working with data
in a single place.
As I said, it's really more useful when you have components
and subcomponents all over the place,
because it let's you access that store
in any of the subcomponents
and have access to all of the methods and properties,
as well as the state.