Overview of Vuex

[00:00:00]
>> Vuex is specifically a centralized data store for shared data logic and methods. And it has rules regarding how exactly state can be mutated and changed. And of course, if you've worked with another framework like React, you might have heard of Redux or Flux. And that has a very similar concept of Vuex.

[00:00:21]
It's essentially this way of centralizing your state, so that state changes in a predictable manner. This is the diagram, the very popular diagram in which we show the Vuex. I think Flux also has a very similar diagram. It's essentially showing how exactly state changes in sort of a flowchart diagram.

[00:00:44]
So, here we'll start with the view component itself, because that's sort of what the view layer is, view as and what you can see. And so, the view component is essentially what the user will be interacting with. So, user can click on it, can hover on it, they can do whatever they want.

[00:01:02]
And the component will then dispatch events to the Vuex store. And the store is what you see on the right, which is actions, mutations, and state. And the action is where Vuex decides what exactly he wants to do. So for instance, in our vending machine example, if someone is trying to get items from the vending machine, the action might be fetch inventory, for example.

[00:01:32]
And so, the action is what? Is how the application decides or how the store decides what to do with that particular event. This is also a way back in APIs, can come in handy. It's where you're essentially calling to a database, or reading from a data base. And that's what happens within actions itself.

[00:01:50]
Mutations is actually what changes and when the state changes. Actions and mutations are sort of cookie because they're fairly similar. But you can think of them as the mutation is where the state is actually changing. And the action is where you do filters and maps, and you check how exactly the state changes.

[00:02:10]
And so, mutation is just essentially changing the state. That's where the state changes happen. And you can see this within DevTools itself. So, I'll show you what that looks like as we progress. But within DevTools, you'll see the mutation that occurs. Because that's when the state is exactly changing and that's what you really care about.

[00:02:29]
And then mutations obviously will mutate the state, so mutations touch states. Actions don't necessarily touch state but mutations do. And then the mutations will mutate the state and change it. And the state will then be propagated back to the component itself. So, the component will render that update, if it cares to and if it wants to.

[00:02:49]
So, that's sort of the flow of how Vuex works with Vuex, and how Vuex works as a whole. And let's break down the different pieces, we'll go over this in the second part of this workshop as well, but here's just is in a high level. So, state is a single source of truth, and it's where you store all the information.

[00:03:10]
So, back to the vending machine example, if you have inventory, all of the inventory or that specific array of items will be in the state. Actions and mutations are similar, except the action is what causes the mutation. So, the action happens, the action is where you determine what to do with the state.

[00:03:33]
And the mutation is where you actually change the state. Another way of looking at it is that actions are asynchronous. So, you can make database calls, whatever that may be. So, async and then mutations are only synchronous. You can't do asynchronous things and mutations. And then getters is something I didn't get to in the diagram.

[00:03:51]
But it's something to think about, because it sits in the layer between state and components. And getters is sort of derived state. So, the state changes, and it updates, and whatever. But the getter is where you can sort of map over the state to get specific things. So let's see, you have a list of inventory and you want the inventory that's below five, let's say.

[00:04:14]
So, you might want to use a getter for that, because you don't necessarily need to change the state to get the items that are less than five. But it's useful to have a getter to check the states for you without you having to do that constantly in component, so it allows for reusability.

[00:04:31]
Cool, so, we'll look at our first example which is sort of this Vending Machine Stock Counter. And so, here we have a very simple view of a item from a vending machine, very popular item. We have a supplies, so how many items are within it? And then, you also have buttons that you can use to interact with that supply.

[00:04:54]
So, I can dispense, and dispense is dispensing items so the supply counter goes down, and so on. And then restock is just sort of setting it back to 40 which is an arbitrary full stock number. And so, this is sort of a very simple state of how you're changing and updating, you can think of it very similar to a counter.

[00:05:18]
We're counting up and down, it's the same idea. Except this is in line with the metaphor that we've been using. And so, if we break that particular piece down in that view down, we have this concept of state, which is the supply. And then, you have the concept of an action and a mutation, which is the restock in that dispense button.

[00:05:39]
In this case, it's only restocked, but there's a dispense button as well. That's where the action and the mutation happens.