Almacene datos de Vue en localStorage usando Vuex

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.

Más tutoriales de vue:

• Una descripción general de Vue.js
• La CLI de Vue.js: aprenda a usarla
• DevTools de Vue.js
• Configuración de VS Code para el desarrollo de Vue
• Crea tu primera aplicación con Vue.js
• Componentes de un solo archivo de Vue.js
• Plantillas e interpolaciones de vue.js
• Directivas de Vue.js
• Métodos de Vue.js
• Propiedades calculadas de Vue.js
• Diseñar componentes de Vue.js usando CSS
• Vigilantes de Vue.js
• Métodos Vue vs observadores vs propiedades calculadas
• Filtros de Vue.js
• Componentes de Vue.js
• Tragamonedas Vue.js
• Accesorios de componentes de Vue.js
• Eventos de Vue.js
• Comunicación de componentes de Vue.js
• Vuex, el administrador de estado de Vue.js
• Vue, usa un componente dentro de otro componente
• Vue, cómo usar un accesorio como nombre de clase.
• Cómo usar SCSS con componentes de archivo único Vue.js
• Usando Tailwind con Vue.js
• El enrutador Vue
• Mostrar dinámicamente un componente de Vue
• La hoja de trucos de Vue.js
• Almacene datos de Vue en localStorage usando Vuex
• Cómo aplicar dinámicamente una clase usando Vue
• Vue, cómo usar v-model
• Vue, por qué los datos deben ser una función
• Roadmap to become a Vue.js developer in 2020