How to create Pinia store modules
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Organizing complex applications with multiple Pinia store modules improves code maintainability and separation of concerns. As the creator of CoreUI with extensive Vue development experience since 2014, I’ve structured numerous large-scale applications using modular store architecture. Each store module should handle a specific domain or feature area, such as authentication, user data, or application settings. This approach creates a scalable architecture that’s easy to test, maintain, and understand across development teams.
Create separate store modules for different application domains using individual defineStore calls.
// stores/auth.js
export const useAuthStore = defineStore('auth', {
state: () => ({
user: null,
token: null
}),
actions: {
login(credentials) {
// Login logic
this.user = credentials.user
this.token = credentials.token
}
}
})
// stores/products.js
export const useProductsStore = defineStore('products', {
state: () => ({
items: [],
loading: false
}),
actions: {
async fetchProducts() {
this.loading = true
this.items = await api.getProducts()
this.loading = false
}
}
})
This code creates separate stores for authentication and product management, each handling their specific domain logic. Each store is completely independent and can be used separately in components. This modular approach makes it easy to locate and maintain specific functionality while keeping related state and actions together.
Best Practice Note:
This is the modular architecture we use in CoreUI dashboard applications for better organization and maintainability. Keep each store focused on a single responsibility and use composition when stores need to interact with each other.
