How to reset Vuex state
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Resetting Vuex state to initial values is essential for scenarios like user logout, form clearing, and application state cleanup in Vue applications. As the creator of CoreUI with over 25 years of development experience, I’ve implemented state reset functionality across numerous enterprise Vue applications. The most effective approach is storing the initial state and creating a mutation that restores all or specific parts of the state. This provides clean state management with proper separation of concerns and maintains predictable application behavior.
Store initial state and create reset mutations to restore Vuex state to default values for logout and state cleanup scenarios.
// store/index.js
import { createStore } from 'vuex'
// Store initial state for reset functionality
const initialState = {
user: null,
preferences: {
theme: 'light',
language: 'en'
},
cart: [],
notifications: [],
isAuthenticated: false
}
const store = createStore({
state: { ...initialState },
mutations: {
// Complete state reset
RESET_STATE(state) {
Object.keys(initialState).forEach(key => {
state[key] = initialState[key]
})
},
// Partial state reset - specific modules
RESET_USER_STATE(state) {
state.user = initialState.user
state.isAuthenticated = initialState.isAuthenticated
},
RESET_CART(state) {
state.cart = [...initialState.cart]
},
// Regular mutations
SET_USER(state, user) {
state.user = user
state.isAuthenticated = !!user
},
ADD_TO_CART(state, item) {
state.cart.push(item)
}
},
actions: {
// Reset action for complete logout
async logout({ commit }) {
try {
// Clear any persisted data
localStorage.removeItem('auth-token')
// Reset store state
commit('RESET_STATE')
// Redirect to login
this.$router.push('/login')
} catch (error) {
console.error('Logout failed:', error)
}
},
// Partial reset for specific scenarios
clearUserSession({ commit }) {
commit('RESET_USER_STATE')
},
clearCart({ commit }) {
commit('RESET_CART')
}
}
})
// Usage in components
export default {
methods: {
handleLogout() {
this.$store.dispatch('logout')
},
clearShoppingCart() {
this.$store.dispatch('clearCart')
}
}
}
This implementation stores the initial state as a reference and provides both complete and partial reset mutations. The RESET_STATE mutation restores all state properties, while specific reset mutations target individual state sections. Actions coordinate complex reset scenarios like logout with additional cleanup tasks.
Best Practice Note:
This state reset pattern is used throughout CoreUI’s Vue authentication and session management for clean user transitions. Always clear sensitive data from localStorage/sessionStorage during reset operations and consider preserving user preferences that should survive logout sessions.
