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

The "Commit & Dispatch" 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 compares and differentiates the purposes of the commit and dispatch methods: dispatch triggers an action whereas commit triggers a mutation

Preview
Close

Transcript from the "Commit & Dispatch" Lesson

[00:00:00]
>> The next part of it is we'll look at and dive into the specific parameters that actions and mutations take. Because as we're looking at modularize ViewX, I think it's useful to also think about how we can make our code a bit clearer and understandable to read. So for actions previously we took in a single parameter which is context and we took in mutations a single parameter which is state.

[00:00:27]
And this was fine for mostly because in our action we only committed, we only did context.commit. But I think it's useful for you to know that there are multiple pieces available within context. So commit is one method, but you can also call state, you can grab getters, you can grab dispatch, which we'll talk about a little later.

[00:00:49]
And these are all useful ways of checking state, for instance, that's what context.state is. Committing is committing mutations, getters is checking specific getter, so you don't have to reuse code that already exists then. And dispatching is something that will come in really handy later when we talk about composing ViewX actions, but it's a way for an action to talk to another action, a sibling action, so to speak.

[00:01:13]
And so all of these are methods available on the contexts parameter. And so what we can do is we can essentially sort of destructure them, you don't have to do context.commit, context dot whatever. You can destructure them and then call them specifically. So looking back at my fetch from inventory code, I'm just removing the payload for now just because for clarity sake, online 13 instead of calling the entire and grabbing the entire context object, I'm grabbing the commit method specifically.

[00:01:46]
So it grabs commit, and then it uses that commit. So it's useful because object destructuring gives me a sense of what exactly I'm doing in action. So instead of having to parse the specific action to be like, am I calling state, am I calling getters, am I calling commits and so on, I can look automatically in the function signature to be like what exactly is being called here, or what exactly is being used.

[00:02:09]
So I know automatically that this action is just committing a mutation because it uses object destructuring to grab the commit and then uses it appropriately. So what could be useful is we have an example and we talked about this a lot, which is that there's a way of restocking a machine.

[00:02:27]
So you have sort of central command which has stock of everything possible, so all items and inventory and then central command will then restock the vending machine so to speak, which allows it to increment and so on. And so what I want to do is very similar to the ping inventory code that I showed you.

[00:02:46]
On line 14, I'm calling an API. There's not any, it's the pseudo code, but I'm calling some API and then I'm grabbing that result. And then I'm passing that result down to my mutation. So again, very similar to how I showed you that mutation takes in a payload.

[00:03:04]
In this particular case, I'm calling the API grabbing the result and then passing it down to my mutation itself as a payload. I just want to emphasize that concept because it's useful as you're working with API's and so on, you're gonna need to understand that payload piece and how exactly a mutation can grab the payload and then update the state appropriately.

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