This course has been updated! We now recommend you take the Introduction to Vue 3 course.
Transcript from the "Vuex Example Walkthrough" Lesson
[00:00:00]
>> Sarah Drasner: If we're gonna look at our like, really, really simple, real life example, we're not using all of the things here. But we had seen this example before with this thing. The way that I'm managing the state for all of these different components, is actually through Vuex. So I've got a bunch of different components.
[00:00:22] Everything's inside an SVG, even the components are pieces of that SVG. I'm just using a group for each one of them, so I'm gonna load different pieces of that SVG as I need them inside of there. So we're going to coordinate some state with Vuex. You can see that we're not usually going to just use all of the things.
[00:00:41] We're just gonna use the couple of things that we need. So we have import Vue from vue, import Vuex from vuex. In here we have showWeather is false, because showWeather is just toggling whether or not we're gonna see the weather component, whatever it might be. And so, it starts as false, we start off with the idea of this template, so each one of them I'm thinking of as a template.
[00:01:08] So the drizzly template is like one template, and then like tornado template would be like another template. So template, we start at 0, and then in the mutations, we're toggling the state is just like showing the weather and not showing the weather. Or we're using update template and we're basically saying, increase it, increase it, increase it until it gets to a certain point, and then have it wrap back around.
[00:01:34] I didn't show you that part, but if I went past the tornado, it'd go back to the drizzles. So if we're looking at the way that this is built, we've got that dialogue that comes in and kinda shakes around as it's telling you different things, and that is going to toggle both that dialogue and also the component, cuz they're both coming in at the same time, they're just in different parts of the application.
[00:02:00] So we've got that phone button that we had pushed, and on click it's vf showing weather, so we're gonna, if it's showing weather or not showing weather. We've the phone that like, press me, thing that's gonna go away if that show weather is in a different case, we're wrapping, this group, and all these different components in a transition group, because even though unmounted, I had that transition that had a bunch of things happening and stuff.
[00:02:36] They're all fading in, and then fading out, they all share that piece of a transition. So some of the transition logic is just fading it in and fading it out and the rest of it is the thing that we used the life cycle hook for. So we're just gonna at leave is leave drop area CSS false, and then G if, showWeather, which is what we were toggling in our state.
[00:03:01] And then, the template is 1, template is 2, template is 3, and then the else for the tornado. So we're advancing the state in our store through that mutation that we're showing these different templates. And then we're saying, if we have these different templates then show them depending on where we are at.
[00:03:26] So we're advancing and coordinating with Vuex. So here's some of the template logic. We have a computed, we have the template, return this.store.state.template so, the template is just basically going to be a computed value. I only wanted to update when that template increments and changes, so that's gonna be a computed value that I can just used template as I needed which I did when I said template equals 1, template equals 2.
[00:03:56] Then we also have these methods, which are toggling that is this dot store dot state dot commit, remember commits, commit that mutation, and then the mounted had all that animation logic we looked at earlier