Tutorial

Loading Vuex Modules Dynamically

Updated on April 26, 2020
author

Alex Jover Morales

Loading Vuex Modules Dynamically

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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 🦄

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products


About the authors
Default avatar
Alex Jover Morales

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
2 Comments


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

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.

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Featured on Community

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel