Vuex ORM

[00:00:00]
>> This person wants you to talk about view Vuex ORM.
>> In this example, I have machines and then I have this operational, it's essentially a machine condition and then it gives me inventory. I did not style this, cuz this is purely to check Vuex ORM [LAUGH]. So from a really high level, I can show you what Vuex ORM looks like, if you are interested.

[00:00:23]
Essentially what you do is you create a model, so I created a model called snack and then I created a model called machine. And Vuex ORM has this concept of entities which are essentially the name of the specific thing. So an entity is, this is called snack, so this is useful because if you are calling it from the component, it'll be like this dot [INAUDIBLE] dot.

[00:00:49]
I think it's state.entities or something like that. So that's what an entity is, it's just how you access it. So also one thing to note with Vuex ORM is that Vuex ORM is a plugin, it's literally a plugin. So we talked about plugins, this is a plugin. And then I can define my machine model.

[00:01:08]
In this case, this is actually really unique because it's a relationship. So I created a relationship between the two, so I'm matching the snacks with the machines. And then there's also a concept of location, which is a separate model to check what that location is. And so I can register those models appropriately, and then I install it.

[00:01:34]
So as you might know, this is plugin specific code. You're essentially installing that database with the models. And then what I do next is I can do various queries to it, which are really useful. So in Vuex ORM, when you do a query you do, before I go further, I should explain the insert piece.

[00:01:59]
So Vuex ORM works only when you insert data into it, [LAUGH] cuz otherwise it's just a model, right? So what I wanna do is let's assume, let's look at locations. So locations is just an array with two items within it. So I can do location, which is model insert, pass in the data and same for everything else.

[00:02:20]
So what I'm using Vuex ORM for here is defining the data model, as well as the relationships, so that's a very useful use case. One example in which it is useful is let's assume there's a concept of lock down. I mean, we're in lock down, but there's a concept of locking down a machine.

[00:02:40]
So let's say a location is locked down so Wicker Park is a location in Chicago. If I press this button, locked down becomes true and the machines that are in that location are locked down. The useful thing about Vuex ORM is defining relationships, defining state, updating state, that updates the relationships without you having to do that.

[00:03:02]
So what I want to show you is I created a method called toggle status. This obviously can be pulled into a Vuex action, like in this case I'm playing around with Vuex ORM, so I wanted to just show. So what I'm doing is I'm essentially going into my location model, I'm doing a where.

[00:03:22]
So it's similar to SQL, you could do where queries. So really nice, you don't have to filter, you don't have to do any of that, you could just do where. So location update where, it matches a specific ID. And then you update that data appropriately. And then again, what we can do here, is I can query the machines that are in that location and then notify those machines that they are no longer operational.

[00:03:47]
So this is way cleaner and way easier than having to do it any other way. I also wrote more complex code. That was just a very simple explanation, so I will go into my Vuex ORM code. Cd vuex-normalize, and I think I had only three branches. Yeah, so this is super complex Vuex ORM, which is why I was a bit worried going down this rabbit hole, but I think it's useful.

[00:04:25]
So the thing that's useful with Vuex ORM is how I've used it is I define my models in a separate folder, so I have a models folder. And then within them, I define the specific model, just so that it's cleaner, I can know that this is where my model lives.

[00:04:44]
And then I also have this thing called helpers. Because sometimes it can be really annoying to have queries live everywhere. So I have a helpers file, so I know that these are specifically going to use my model. So it helps me reduce the clutter of adding my model all over the place.

[00:05:04]
So with this, I can actually import that into my store, essentially what I'm doing here is, cuz this is where I'm initializing the code, yeah. So to answer your question about state and Vuex ORM, which is very long winded, I create an init function in my actions where I'm initializing all the DB stuff.

[00:05:29]
This init is interesting and I didn't talk about this, but I will now. One thing I really like to do with my Vuex code is, I like to write extra things which checks across all of my modules and all of my code, to see whether there's an init.

[00:05:47]
And then it automatically dispatches the init [LAUGH] so, it's a really nice way of checking and getting all data from databases and standing things up. So the initialization code of reading from databases is independent of my components. So the store does all that work. So that's what this is.

[00:06:06]
And then I'm doing all the DB stuff here. And then again, within my actions, I can also use that to do queries. I just chose to extrapolate all the queries into a helper, just because personally for me, it's useful to extrapolate my personal code that I'm doing in my store state, and what's happening in Vuex ORM.

[00:06:28]
And then I pull that in as I see fit.