Persistir la información con Vuex Esteban Quezada • 05/2019

Entre los métodos comunes para almacenar esta información esta IndexDB, LocalStorage y Cookies. Estas herramientas nos permiten, a través de distintas APIs, almacenar información en el navegador usado en el momento.

Al utilizar vuejs con vuex para el manejo del state nos facilitamos la posibilidad de manejar un estado centralizado a través de la aplicación, que es reactiva y se integra consistentemente con el resto del framework. Sin embargo vuex por defecto no brinda la posibilidad de persistir la información del mismo a través de sesiones del navegador o incluso al refrescar la página. Esto nos lleva a usar un plugin para vuex llamado vuex-persistedstate.

Conocer más sobre Vuex

Utilizar vuex-persistedstate en nuestro proyecto es súmamente fácil. Comenzamos por añadir el módulo a nuestro proyecto con el siguiente comando:

$ npm install --save vuex-persistedstate

En el archivo donde cargamosvuex procedemos a agregar el plugin:

import Vue from 'vue'
import Vuex from 'vuex'
// plugin a agregar
import  createPersistedState  from  'vuex-persistedstate'

Vue.use(Vuex)

const store = new Vuex.store({
    state: {},
    mutations: {},
    actions: {},
    getters: {},
    // aquí agregamos el plugin
    plugins: [createPersistedState()]
})

Al colocar este plugin como parte del store, de ahora en adelante toda la información guardada en vuex será persistente en el navegador. Por defecto vuex-persistedstate almacena el estado en el LocalStorage. Si se desea borrar manualmente la información almacenada se puede realizar desde el Developer Tools del navegador. Para eso navegamos a la pestaña Application, en Storage seleccionamos Local Storage y eliminamos la información que deseemos borrar.

LocalStorage in Developer Tools

Esto es en caso de querer vaciar totalmente el vuex. Sin embargo podemos manipular y borrar información por código como usualmente hacemos al manipular el state.

Compartir