Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Write a Vuex Plugin using TypeScript

    Alex Jover MoralesAlex Jover Morales

    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.

    vueVue.js
    typescriptTypeScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss