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

The "Moving to State & Actions Practice" 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 moves the state out of a UI component in Vue into a Vuex Store using the restock method, as well as using actions and mutations.


Transcript from the "Moving to State & Actions Practice" Lesson

>> Our next exercise is again, just doing the exact same thing we did earlier, except we're doing it for the restock method. So similar to what you did with dispense, you're taking that restock method. And you're adding an action, and mutation, and then you're dispatching the action. For this particular exercise, I hope that that was fairly straightforward.

But we're gonna go over it together very similar to what we did before, but slightly different. I'll live coded just so that you actually see the steps that I'm going through to do it. And then if you haven't done it or you still need to take your time, feel free to follow along.

I have a restock method and I want it to dispatch a specific action. So I'm gonna do this .$store.dispatch. And then I'm calling restock. And then let me go up to my action, and I'm gonna create a restock action. It takes in a default context. I'm gonna commit that particular stock.

So I'm gonna commit that mutation and then now I need to create the mutation itself. So it's just doing equals 40. So all it's doing now is just essentially restocking back to 40. So let's see if that works. It's always a gamble, so obviously restock can't be restocked if you're 40.

I disabled that cuz it doesn't make sense for you to click that button if it's already at the top. So I'm gonna dispense a bit which frees up that particular button, and then when I click restock, it restocks. So it works, great. Congratulations. This is your first introduction to UX.

And using UX, and using a store, dispatching actions, committing mutations.

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