Exportar e importar el estado de Vuex

Si estás familiarizado con Vuex, sabrás que Vuex es una state management pattern library para aplicaciones Vue. Vuex centraliza el estado de la aplicación y cómo los componentes, y otras partes del código, lo modifican.

Puedes encontrar muchos artículos hablando sobre Vuex, incluso yo escribí 2 artículos hace 3 años hablando de ello: Vuex el redux de VueJS I “Vuex el redux de VueJS I”) y Vuex el redux de VueJS II “Vuex el redux de VueJS II”) (Spanish)

Pero hoy escribiré sobre un caso de uso particular relacionado con vuex, como habrás podido leer en el título, sobre cómo exportar e importar el estado de Vuex.

Es un proceso muy sencillo, y no es necesario para la mayoría de las aplicaciones, pero creo que es útil saber cómo hacerlo.

Exportar

Exportar es muy simple, solo necesitas obtener el estado, por ejemplo desde un componente

const savedState = this.$store.state;

Y voilà, ya tienes el estado del store, podrías guardarlo en Local Storage para mantener el estado incluso si el usuario cierra o recarga la pestaña del navegador. Realmente no necesitas escribir código para eso, existe una librería increíble que hace eso: vuex-persistedstate

Importar

Puedes pensar que importar el estado es similar a exportar: this.$store.state = savedState Si lo intentas, obtendrás una Exception

Uncaught Error: [vuex] use store.replaceState() to explicit replace store state.

And si lees con atención, el mensaje de la excepción te da la solución: Usa store.replaceState()

Este método del store reemplaza todo el estado del store (el root state). Por ejemplo, Vue Dev Tools lo utiliza para hacer los time travels.

Aplicaciones

Se me ocurren algunas aplicaciones para esto, como mencioné antes, guardar el estado en Local Storage, o exportar y guardar el estado en un archivo JSON para guardar la configuración de tu aplicación, etc…