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:
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:
<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:
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.
author
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.
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!
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.
This comment has been deleted
I think that
state.jsis a misleading name. The file should be callednotifications-store.jsor something along those lines. You are not just loading the state when using registerModule.