Move into a Vuex Store Solution

[00:00:00]
>> So I will check out to that particular branch because step one already has everything working. I'm gonna just get the project up and running so that we see what we're working with first cuz it's nice to be able to at least have some visual. You can also do NPM run serve.

[00:00:18]
I use yarn specifically because I enjoy that process. But this is very similar to what we had earlier we have like a restock, and we have a dispense with loading state. And so what we wanna do is we want to be able to move the store out from our component into the store code itself.

[00:00:39]
So if you look at store/index.js which I used vcli. And so it created an index.js and a store folder, which is why you have the structure but again if you want to you can create store.js sort of independent if you want. So my store file is empty at the moment my main.js file should be empty, well actually it doesn't matter if it lives there because the store is empty, so it's just importing an empty store so it's fine.

[00:01:08]
And my store code, all of it lives in my component at the moment. So if I scroll up to the top of my component, I'll see all this extra code with even this Vue.use and so on. So let's remove that because we no longer need it to live in our component.

[00:01:27]
So we're gonna just delete that all together. And then what we'll do is I'm just gonna grab from the fake API call all the way to the end of my stall where the xbot.default is. And then this is gonna create some extra like fun stuff because of the way I copied it.

[00:01:46]
I should have copied the inside of it, but I will do that now. Let me grab that. So now I have an empty store. I'm gonna remove it. And I'm just gonna update the internals of this with my store like such. That should work. Yes. So that works as expected and so essentially what I did is I moved to using Vuex Store.

[00:02:15]
I will show you the DevTools. So I'm using Vue DevTools here because I like to be able to see how exactly my state is changing, what actions and what mutations are being called. So I'll give you a quick rundown of what exactly the DevTools look like. And then we're gonna be living mostly in the Vuex tab of this.

[00:02:38]
And so if you're looking at the, this is my screen, and you'll see the DevTools to the right, you'll see each individual component. So currently I didn't componentize because in this example it didn't quite matter. So we have one single component, which is the view layer, you see, you see the computer properties and then you see data as well.

[00:03:00]
And so what I want to show you is this next tab which has this sort of loading icon, and that is the Vuex tab. So in the Vuex tab, you'll see things changing and updating. So here if I click dispense, you should see that dispense being dispatched. And then you'll see it as mutation.

[00:03:25]
So generally Vuex will show you mutations. Because the mutation actually touches the state. And then it says recording state on demand. So it doesn't show you the state automatically. But if you want to see the state, you can click the load state button and it shows you all of the information associated.

[00:03:43]
So you see things change in real time, you can see the specific mutations that are being called and so on. So the DevTools are really useful as you're working through exercises because it gives you a sense of what's happening in your application, and it's a really good tool to debug as well.

[00:04:00]
And it allows you to also like explicitly change state if you want it to check how your UI was looking like and so on.