// Tutorial //

Loading Vuex Modules Dynamically

Published on May 22, 2018 · Updated on April 26, 2020
Default avatar
By Alex Jover Morales
Developer and author at DigitalOcean.
Loading Vuex Modules Dynamically

Vuex is an easy to use and performant solution to handle state management. It makes it a breeze to manage large-scale Vue.js applications and ensures a predictable way to mutate the state by exposing a store.

You may already know about Vuex, but if you don’t Joshua Bemenderfer gave us a great introduction.

You can define modules in your Vuex store as follows:

const dogs = {
  state: {
    data: []
  },
  mutations: {
    addDog(state, dog) {
      state.data.push(dog)
    }
  }
}

const store = new Vuex.Store({
  modules: {
    dogs
  }
});

Usually a large application has several modules. All of them are defined statically in their own file, and combined together when calling new Vuex.Store. That’s what you should do in practically all cases.

But there could be a very specific case where you’d want to load a Vuex module dynamically into your app, extending the current store at that point.

A very specific case, like what, you say? One could be writing an external component library that depends on Vuex.

The same could apply in an applications divided into several internal packages. Each package, could have their own components and stores.

Usually, this is the case for common reusable modules among apps. For example, a notifications module that provides some notification components and a store module that extends your application store, adding a new module that’s accessible from everywhere in your app.

Let’s see how to do that.

Add a Module Dynamically to the Store

Given an app with an usual Vuex setup, let’s create a notifications folder. You can place it wherever you’d like, just imagine it’s an external package.

In there, add a state.js with a basic Vuex module:

notifications/state.js
export default {
  state: [],
  mutations: {
    addNotification(state, notification) {
      state.push(notification);
    }
  }
};

Then create a Notifications.vue file where you import it. You’ll then access the $store instance variable, assuming that there’s a Vuex store for getting the state and committing an addNotification:

notifications/Notifications.vue
<template>
  <div>
    <p v-for="notification in notifications">
      {{notification}}
    </p>
    <button @click="addHey">Add Hey!</button>
  </div>
</template>

<script>
import state from "./state";

export default {
  computed: {
    notifications() {
      return this.$store.state.notifications;
    }
  },
  methods: {
    addHey() {
      this.$store.commit("addNotification", "Hey!");
    }
  }
};
</script>

Now, the idea is that the notifications Vuex modules adds itself when the component is used. In that way, if an external app is using the component, it all comes packaged-in already and the app doesn’t have to care about adding it directly. So, we could use the created hook for that.

And, in order to dynamically add the Vuex module, we can use the store’s instance property $store.registerModule:

notifications/Notifications.vue
import state from "./state";

export default {
  // ...
  created() {
    this.$store.registerModule("notifications", state);
  }
};

Now the module will be registered when the Notifications components is used.

Wrapping Up

The Vuex store in large applications is organized statically through different modules. That’s how it should be. But in very specific cases, you might need to extend the store and add a module yourself.

You can see the working demo and code of this article in this Codesandbox

Stay cool 🦄


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?

This comment has been deleted

I think that state.js is a misleading name. The file should be called notifications-store.js or something along those lines. You are not just loading the state when using registerModule.