Create a Vuex Store using TypeScript

Access State by using Vuex getter functions with TypeScript

Modify State by using Vuex Mutations with TypeScript

Use Vue Tools to Navigate Across the Vuex State

Perform Async Updates using Vuex Actions with TypeScript

Handle Forms Connected to a Vuex Store using TypeScript

Split Vuex Store into Modules using TypeScript

Lazy Load a Vuex Module at Runtime using TypeScript

Access the Root State from a Vuex Module using TypeScript

Use Namespaces in Vuex Stores using TypeScript

Call a Root Vuex Mutation or Action from within a Module in TypeScript

Write a Vuex Plugin using TypeScript

Add options to a Vuex plugin using TypeScript

Vue.js State Management with Vuex and TypeScript

Sometimes we need to apply common functionality to the store. Vuex plugins allow us to access the store which allows direct access to `State` and `Mutation` using hooks. 

This lesson shows you how you can add a history Vuex plugin that keeps track of the called mutations using TypeScript.



Start by adding a new plugin.ts file. A plugin is just a function that takes the store as a parameter. In order to type it, we need to import store from Vuex, and it needs the root state as a parameter, because it's a generic. Let's import it as well.

Then type it as a store root state. Having the store instance, we can subscribe to every motation it triggers. Subscribe takes motation and a state as parameters. The parameter types should be inferred from the store root state that we have indicated above.

If in the Vuex version you are using, you don't see motation typed as a motation payload, then you can create a payload interface yourself with a type as a string and a payload as any, and then use that type there, but whether keep up to date with the latest versions.

This history plugin will add a for history state all the motations that have been called. For that, let's commit a motation called history/add that we will implement, and pass the motation as the payload. A point here is, since we are subscribing to every motation that is called, and in there, we calling a motation, that will end up in an endless loop.

To solve that, let's check that the type of the motation is not history add. Then wrap the store commit inside that condition. Let's add here a console log as well in order to quickly check it in the console.

Now, let's implement a history module. It will have a state with a history array, and an add motation that takes the state and the motation as parameters. In there, we'll push the motation to the state.history. Let's indicate as well namespace true for better isolation.

Now, let's type the module. First, import module from Vuex, and type it with the module type, which is a generic that takes the module state as the first parameter -- in this case, history state that we are going to implement -- and as the second, the root state, and import the history state.

Then go to the types file, and let's write here the history state. It's going to have an array of motation payloads that we have to import from Vuex. Then replace the to-do type by a motation payload, and the to-dos property by history.

Now, go back to the plugin, and whoa, we see there is a typo in the state.history. This is the power of TypeScript, that as soon as you start adding types, errors will start to appear. At this point, we can already register the module by using the register module function from the store, just when the plugin gets loaded.

Finally, we only have to import it, history from plugin, and add it to the Vuex store using a plugins property, which is an array of plugins. Now, if we try this out, let's run a couple of motations. Then if we check in the state, let's make this a bit wider. We'll see there the history property with those two motations that we just ran.

Write a Vuex Plugin using TypeScript

Share this video with your friends

Course

Vue.js State Management with Vuex and TypeScript