Vuex Plugins

[00:00:00]
>> Now we're gonna move into using plugins, which is a really useful, another useful way in which you can use Vuex and a pattern you can use in your applications. So a plugin is a function that receives the stores that argument and allows you to peek into the Vuex store.

[00:00:15]
So this is it might be a bit confusing, but the idea of a plugin is that it doesn't directly update the store and it doesn't directly do anything to the store. It's purely a way in which you can access the store without touching it. So it's like being a bystander, and you're seeing the state change.

[00:00:32]
You're seeing actions and mutations happen, but you're not doing anything to cause them. You just want to be notified when that happens. And why is this useful? Well, sometimes it's useful to monitor state changes to perform tasks that might not necessarily update the state. So for example, you might want to make a separate database call in the event that someone clicks this button, notify, going back to the vending machine example.

[00:01:01]
If someone tries to retrieve an item, the supplier might want to know that that thing happened. But the state of that has nothing to do with the vending machine or the person trying to get items or the inventory at all. It's purely the supplier wanting to some extent spy on what's happening within the state and within the mutations of the vending machine itself.

[00:01:25]
And so monitoring state changes is a really useful way in which you might want to use the Vuex plugins, and it's the main reason why you use Vuex plugins. So the way to use a plug in is not much different from how you would add in a module.

[00:01:41]
So when you add in a module, you import the module and then you add it in with the attribute. So in Vuex, we have this concept of a plugins attribute that the store has. And so plugins accepts an array, because the idea is that you're not the only plugin there more than one plugin.

[00:01:59]
And so you can pass in however many plugins or whatever plugin you're using. So in the code on the left, which is the store.js file, I'm importing my plugin from, let's say, a plugin file. And then I'm using that plugin by adding it to the array of plugins.

[00:02:17]
So in this case, it's called my-plugin. It's not very unique or interesting a name, but it's a good example for now. And then on the right hand side, I create a plugin, and it's again, called my-plugin, cuz it has to match. And then, I'm essentially creating this object of things that are happening.

[00:02:42]
So the plugin has one argument, or it takes in an argument, which is the store. Because the idea is that the plugin cares about the store and it cares about what's in it. And it wants to know how things are mutating and what kinds of actions are causing those mutations and so on.

[00:02:59]
So it takes in the store and then it can do various things to it. You might notice that here I am subscribing to things and so specifically I'm subscribing to let's say a mutation or a state. And store.subscribe is specifically what a plugin has access to, cuz it can subscribe to mutations.

[00:03:26]
So generally within the plugin, if you're peeking into the store, you wanna know when state changes that's actually really useful. Because when state changes, that's when things are happening, cuz sometimes an action is called but then state doesn't change, cuz the mutation Isn't called and so on. So, for plugins, generally you want to subscribe to mutations.

[00:03:53]
So here I'm subscribing to the mutation, it also takes in state, so you can compare the mutations with the state that can be really useful sometimes. And within mutation, I can also grab specific things regarding that mutation. So You might notice on line seven, I'm grabbing the type of the mutation and the type of the mutation is actually the name of the mutation.

[00:04:19]
So type is is equivalent to name. So if I have a mutation called update service dates, that is what mutation.type gives you. And then I also have access to the payload, which can be useful because I wanna know how exactly the state is being changed. So, a thing to note about here is that the store.subscribe when it grabs the mutation.

[00:04:43]
This by default is before the mutation happens. So the state hasn't actually updated. So the state hasn't actually changed, it's just the mutation is being called. So it's before the mutation happens, which is why grabbing the state can be useful because you might want to know what the state is, and what mutation, how the mutation is changing that specific state.

[00:05:03]
So you can do a comparison and so on. So on the left hand side, we have our store code. And let's assume that we have a mutation called updateServiceDate. And updateServiceDate takes in a state and a payload and updates a specific property called lastServiced with that payload. And so I might want to care, I might care about what that is, and what that mutation is in the plugin, I want to know.

[00:05:30]
So, that's where a plugin can be really useful. Let's dive into the specificities of a plugin. Before we look at some concrete examples, first. So, I showed you a little bit about what the code looks like, but let's explore the different pieces of it. So a plugin is just an object, [LAUGH] Basically, many things are just objects.

[00:05:54]
But a plugin takes in stores its main parameter. And store is where it can access the subscribe mutations. So that's one way in which it accesses the store grabs the entire store, and then from that there are methods within it can call. There's also the ability to subscribe to mutations.

[00:06:15]
So you might notice here that store.subscribe has mutation as a first argument. And that's because I'm subscribing to a specific mutation and then I can grab the type and the payload. And then I can also access the state which I mentioned can be useful, because you might want to know how the state has changed and so on.

[00:06:33]
And then mutation has properties, specifically type and payload. So let's assume that I want to log information regarding when a machine is serviced. So for instance, a machine is serviced and I want to headquarters to know when the machine is service. As I mentioned, they might want to spy into the process and the frequency and so on.

[00:06:57]
And you can think of HQ as sort of like local storage that can be useful. A database or an API, whatever you have it that needs to do logging information. Or that cares about state that's changing within an application. And so what we'll do is, code sandbox will not work, so I will move over here.

[00:07:25]
So we'll look at an example of the code that I'm running. So essentially what's happening is I have a last service timer that checks and tells me when the button was last clicked. So if I click it again, it will update to the last second. So it's been In my timezone 350 3:30pm central time and then if I click it again it updates and so on so it's updating per second.

[00:07:52]
And what can be useful as I might want this information to be logged somewhere or saved somewhere or propagated somewhere else. And so what I could do with that is I could create a way of subscribing to that specific mutation, and for now what I'll do is I'll just log it to local storage.

[00:08:12]
I'll just save it to local storage, and then it can be useful to just access, because then instead of initializing without having a date. I'll know exactly when something happened. It's sort of like a database call or in this case, local storage does the purpose and serves the purpose that we need.