Check out a free preview of the full Vuex for Intermediate Vue 2 Developers course

The "Commit & Dispatch Solution" Lesson is part of the full, Vuex for Intermediate Vue 2 Developers course featured in this preview video. Here's what you'd learn in this lesson:

Divya live codes the solution to the commit and dispatch exercise.

Preview
Close

Transcript from the "Commit & Dispatch Solution" Lesson

[00:00:00]
>> So the next exercise that we'll work on is to look at the code that we have so far. And we're gonna grab instead of using context directly, we're going to destructure it. Which means that we're gonna create an object, and then we're gonna use the specific pieces of it that we will need in our mutation.

[00:00:20]
In this particular exercise, I hope it was fairly straightforward. We didn't add any extra code. All we did was update the existing code, and it doesn't really do anything. It just makes it a bit more clean. So let's just go over what that looks like. So, I'm specifically, and the exercise specifically asked for you to destructure the context object.

[00:00:45]
Which is available on the actions, default parameter that actions get. So, all you have to do is you're just instead of using context, you're just grabbing commit specifically. And then all you do next is you grab every instance of context.commit in that specific action. And then you change it appropriately.

[00:01:10]
And then you would iterate through every single instance, and change it as such. And then that's a really simple way, so it's a bit cleaner. Rather than having to chain like context.commit is a bit ugly, and not very readable sometimes. And I automatically look at my action, and I know that I'm only committing a mutation.

[00:01:28]
I'm not checking state, I'm not checking ghettos, and so on.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now