How to use modules in Vuex
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Vuex modules enable organizing large stores into separate, manageable modules with their own state, mutations, actions, and getters for scalable Vue applications. As the creator of CoreUI with over 25 years of development experience, I use Vuex modules extensively for building maintainable, enterprise-scale applications. The most effective approach is creating separate module files with namespaced modules to avoid naming conflicts and improve code organization. This provides clean separation of concerns and makes large applications easier to maintain and debug.
Use Vuex modules with namespacing to organize store functionality into logical, maintainable sections for large-scale applications.
// store/modules/users.js
const users = {
namespaced: true,
state: {
list: [],
current: null,
loading: false
},
mutations: {
SET_USERS(state, users) {
state.list = users
},
SET_CURRENT_USER(state, user) {
state.current = user
},
SET_LOADING(state, isLoading) {
state.loading = isLoading
}
},
actions: {
async fetchUsers({ commit }) {
commit('SET_LOADING', true)
try {
const users = await api.getUsers()
commit('SET_USERS', users)
} finally {
commit('SET_LOADING', false)
}
}
},
getters: {
activeUsers: state => state.list.filter(user => user.active),
userById: state => id => state.list.find(user => user.id === id)
}
}
export default users
// store/modules/products.js
const products = {
namespaced: true,
state: { items: [], categories: [] },
mutations: { /* product mutations */ },
actions: { /* product actions */ },
getters: { /* product getters */ }
}
export default products
// store/index.js
import { createStore } from 'vuex'
import users from './modules/users'
import products from './modules/products'
const store = createStore({
modules: {
users,
products
}
})
// Component usage
export default {
computed: {
users() {
return this.$store.state.users.list
},
activeUsers() {
return this.$store.getters['users/activeUsers']
}
},
methods: {
fetchUsers() {
this.$store.dispatch('users/fetchUsers')
}
}
}
Namespaced modules keep state, mutations, actions, and getters isolated within their module namespace. Access module state with state.moduleName.property, getters with moduleName/getterName, and actions with moduleName/actionName. This prevents naming conflicts and provides clear module boundaries in large applications.
Best Practice Note:
This modular approach is used in CoreUI’s enterprise Vue templates for scalable state management. Always use namespaced modules for better organization and consider using module helper functions like mapState and mapActions for cleaner component code.
