Mutation Local Storage Plugin Practice

[00:00:00]
>> What we'll start with, is we'll subscribe to a mutation. So again, we'll look at that syntax, we just stall that subscribe. It takes in a mutation in the state, that's all it does. Another thing to note, I'm calling it persist service date, because that's what it's doing.

[00:00:14]
It's persisting the time and date of when the machine will service, so I called it persist service state plugin. You might have heard of various other plugins, like UX Persistent Data, I think, is what it's called. That's also another example of using a plugin to persist state across sessions, and across tabs, and so on.

[00:00:36]
So this is sort of similar in that vein. So what I'll do first, is now that I have this subscription, boilerplate code, so to speak, I might want to grab and figure out what exactly the mutation I care about is. So in this instance, because this is persisted service date, I care a lot about the mutation called update service date.

[00:00:59]
So I might want to check for that type to be like is this mutation of type this, and if so, it does something else. And then, within that, I can also do extra things, like I might save things to local storage. So here, I'm essentially checking to make sure the mutation is of type, update service date.

[00:01:20]
And if so, I'm going to try to set the last service date to whatever it is to local storage. So every time I'm accessing it, let's say, I can just grab, local storage has information as to when the machine was last serviced. So that can be useful in terms of propagating the state to make sure that when you refresh your screen, that number, or that specific date gets propagated into the state without it being updated.

[00:01:51]
So we're gonna start by creating our first Vuex Plugin called persist. I think I call it persist service dates. And then, we gonna go from there and work on exercises as to how we can progress from this. What we started with here, is I'm going to find my, this is the wrong folder.

[00:02:18]
I'm currently in the Vuex Plugins, so I'm gonna go in there, and then, I'm going to go specifically in my plugins folder. So far, I have this boilerplate, which just shows me my persists data plugin, which is the name of the plugin. And I'm default exporting it, and you might also notice that in my store code, I am adding it to the top, which I didn't do yet, but I will do now.

[00:02:45]
So I will import, let's call it, let's just do persist data plugin from a plugins, persist data, and then, I will pass it in here. Like so, so I'm importing the plugin, and then, I'm passing it in. So that should make it accessible immediately. Cool, so that means that it can do a bunch of things.

[00:03:17]
So I'm gonna check to make sure that everything is wired up, because, sometimes, things aren't wired up. And so, I automatically see that I'm getting the mutation type, as well as the payload, and I can see things happening. So that means my console logs are working, is console logging the mutation, as well as the state.

[00:03:40]
So what I wanna do now, is I want to check for the specific mutation type. So I'm gonna do mutation type. And I'm checking that it is of, I think it was called update service states. So I'm gonna check that, and then, I'm gonna do some stuff if it works, and the specific thing I'm gonna do is copy and paste the code.

[00:04:16]
I'm going to create a record, and then, save that to local state. So the record is essentially just checking, so you might notice state.lastServiced. So I'm actually accessing the state to make sure that I am logging when the date of the last service happened, because, that's obviously a mutation, right?

[00:04:40]
So I wanna know when exactly that happened. And then, I also wanna be like, maybe I want a thing called persist for to check like, how long this information should be persisted for, let's see. And then, that's one record that I can create. And then, my try catch block is where I will add that specific last service, or that specific record as last service, itself, and then, I think the last bit was just I need this boilerplate.

[00:05:12]
Yes. It's not boilerplate, I wrote it. Okay, cool. So if this works, we will have a handy dandy. Let's do. I think it's done? And I wanna grab last serviced. So if I get this specific thing, I can see that the local storage item was actually set, which means, that my plugin worked, because had this not been written, local storage would not have been set.

[00:06:01]
So what happened is that when that mutation happened, the local storage was set, and just for, I guess, for clarity, we can try pressing the button again, so I press it. You can see a new mutation happens. And then, of course, you'll see that the local storage item changed, as well.

[00:06:24]
So that is our first Vuex Plugin. So that's essentially the nuts and bolts of how that works.