How to reset Pinia state
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Resetting Pinia state is essential for logout functionality, form resets, and cleaning up application data when switching between user sessions or contexts.
As the creator of CoreUI with extensive Vue development experience since 2014, I’ve implemented state resets in numerous dashboard applications for user logout and data cleanup scenarios.
The most straightforward approach uses Pinia’s built-in $reset() method to restore store state to its initial values.
This method ensures complete state cleanup while maintaining store reactivity and subscriptions.
Use the built-in $reset() method to restore Pinia store state to its initial values.
// store/user.js
export const useUserStore = defineStore('user', {
state: () => ({
name: '',
email: '',
preferences: {},
isLoggedIn: false
}),
actions: {
login(userData) {
this.name = userData.name
this.email = userData.email
this.isLoggedIn = true
},
logout() {
this.$reset()
}
}
})
// In component
const userStore = useUserStore()
// Reset store to initial state
userStore.$reset()
This code defines a user store with login and logout actions where logout uses $reset() to clear all state. The $reset() method restores every state property to its original value as defined in the state function. This is particularly useful for logout scenarios where you need to clear all user data and return the store to a clean state.
Best Practice Note:
This is the state cleanup pattern we use in CoreUI authentication workflows for secure logout processes. For selective resets, create custom reset actions that only clear specific state properties while preserving others like app settings.
