Restablecer el estado en Vuex

Vuex es un almacén de datos centralizado que nos permite alterar la información de forma sencilla a través de acciones y mutaciones.

El estado de una aplicación son los datos que maneja, si tu aplicación es un blog, seguramente tendrás un estado similar al siguiente:

const initialState = () => ({
  users: [],
  posts: [],
  comments: []
})

Para poder manejar esa información podrías crear acciones, mutaciones y getters de la siguiente forma:

const appModule = {
 state: initialState(),
  actions: {
    addUser ({commit, state}, user) {
      commit(types.ADD_USER, user)
    }
  },
  mutations: {
    [types.ADD_USER] (state, user) {
      state.users.push(user)
    }
  },
  getters: {
    users (state) {
      return state.users
    },
    usersLenght (state) {
      return state.users.length
    }
  } 
}

Imagina que tienes tu aplicación con un montón de datos, y por algún motivo necesitas empezar de 0, hay muchas aplicaciones que tienen este requerimiento, el usuario interactúa y llega un momento que necesita volver a empezar, para ello podemos restablecer el estado en Vuex, lo que significa que el initialState que hayamos definido volverá a estar activo y todos los datos que se habían generado desaparecerán.

const appModule = {
 state: initialState(),
  actions: {
    addUser ({commit, state}, user) {
      commit(types.ADD_USER, user)
    },
    resetState ({commit, state}) {
      commit(types.RESET_STATE)
    }
  },
  mutations: {
    [types.ADD_USER] (state, user) {
      state.users.push(user)
    },
    [types.RESET_STATE] (state) {
      const initial = initialState()
      Object.keys(initial).forEach(key => { state[key] = initial[key] })
    }
  },
  getters: {
    users (state) {
      return state.users
    },
    usersLenght (state) {
      return state.users.length
    }
  } 
}

Cómo puedes ver, he añadido una nueva acción y una nueva mutación, simplemente por ejecutar la acción resetState ésta ejecutará la mutación [types.RESET_STATE], y una vez eso suceda, nuestro estado volverá a su estado inicial de nuevo.

Así de fácil es restablecer el estado en Vuex, espero que te haya gustado y parecido útil.