Almacene datos de Vue en localStorage usando Vuex

Aprenda a almacenar datos de Vuex automáticamente en localStorage o sessionStorage

Cuando se habla de almacenar datos, hay varias formas de conservar los datos.

Uno es muy simple, es perfecto para prototipos y almacena los datos usando elAPI de almacenamiento web: localStorage y sessionStorage.

Al usar Vue, puede hacer uso de esa API de muchas maneras. Uno de los más simples es confiar en elvuex-persistBiblioteca.

Lo instalas usando npm o Yarn:

npm install vuex-persist

#or yarn add vuex-persist

Abra el archivo de la tienda Vuex y agregue:

import VuexPersist from 'vuex-persist'

Inicializar VuexPersist:

const vuexPersist = new VuexPersist({
  key: 'my-app',
  storage: window.localStorage
})

keyes la clave que se usa en la base de datos localStorage.

CambiolocalStorageconsessionStoragepara usar ese otro sistema de almacenamiento (cada uno tiene sus propias peculiaridades, consulte el documento de API de almacenamiento web que vinculé arriba).

A continuación, agreguevuexPersista la lista de complementos de Vuex, al inicializar la tienda:

const store = new Vuex.Store({
  //...initialization
  plugins: [vuexPersist.plugin]
})

¡Eso es! Cada vez que se cambia la tienda, la biblioteca la conservará en el navegador.

Hay capacidades más avanzadas que puede encontrar en eldocumentación oficial, pero estos son los conceptos básicos para comenzar.

Descarga mi gratisManual de Vue


Más tutoriales de vue: