Persistencia y devtools de Pinia
pinia-plugin-persistedstate, persistencia de campos específicos y viaje en el tiempo con los devtools de Pinia
Persistencia y devtools de Pinia es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Persistencia del estado del store
De forma predeterminada, el estado de Pinia se pierde al volver a cargar la página. Para conservarlo, use el plugin pinia-plugin-persistedstate, que sincroniza el estado con localStorage o sessionStorage.
Instalación del plugin
Registre el plugin en la instancia de Pinia una sola vez. Después, cada store puede activarlo.
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)Activación de la persistencia en un store
Establezca persist: true en las opciones del store. Ahora todo el estado se guarda y se restaura automáticamente.
export const useUserStore = defineStore('user', {
state: () => ({ name: '', token: '' }),
persist: true
})Elección del almacenamiento
La opción storage determina dónde se guarda el estado. Use sessionStorage para los datos que deban borrarse al cerrar la pestaña.
persist: {
storage: sessionStorage
}Persistencia de solo algunos campos
La opción paths limita las claves de estado que se guardan. Es ideal para conservar un token, pero no indicadores temporales de la interfaz.
persist: {
paths: ['token', 'name'] // 'isLoading' not persisted
}Serialización del store
La persistencia funciona al serializar el estado en JSON. Los valores deben ser seguros para JSON: objetos simples, arrays y cadenas de texto, además de números. Las funciones, los Maps y las instancias de clases requieren un serializador personalizado.
persist: {
serializer: {
serialize: JSON.stringify,
deserialize: JSON.parse
}
}Devtools de Pinia
Con Vue Devtools instalado, Pinia añade un panel específico. Puede inspeccionar cada store, observar los cambios de estado en tiempo real y editar los valores directamente.
Depuración con viaje en el tiempo
Cada acción aparece en la línea de tiempo de Devtools. Puede viajar en el tiempo: volver a un estado anterior para reproducir un error y después avanzar de nuevo.
SSR e hidratación del store
En la representación del lado del servidor, el servidor rellena el store y después el cliente debe hidratarlo con los mismos datos para que el marcado coincida. Un estado distinto provoca advertencias de hidratación.
Pinia con Nuxt
El módulo @pinia/nuxt integra Pinia en Nuxt y gestiona automáticamente la hidratación de SSR. El estado rellenado durante la representación del servidor se serializa en la página y se restaura en el cliente.
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@pinia/nuxt']
})Combinar la persistencia con SSR
Tenga cuidado: localStorage no existe en el servidor. Los plugins de persistencia lo detectan y solo se ejecutan en el cliente, por lo que la hidratación de SSR usa el estado del servidor y las capas de persistencia se aplican después.
Comprobación rápida
Ponga a prueba sus conocimientos sobre persistencia y Devtools.
Resumen
Ha aprendido sobre persistencia y herramientas:
- pinia-plugin-persistedstate guarda el estado en el almacenamiento local o de sesión.
- Las opciones storage y paths controlan dónde y qué se guarda.
- El estado se serializa en JSON, por lo que los valores deben ser seguros para JSON.
- Devtools ofrece inspección en tiempo real y viaje en el tiempo; @pinia/nuxt gestiona la hidratación de SSR.
Preguntas frecuentes
¿La lección «Persistencia y devtools de Pinia» es gratis?
Sí — el texto completo de «Persistencia y devtools de Pinia» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Persistencia y devtools de Pinia»?
pinia-plugin-persistedstate, persistencia de campos específicos y viaje en el tiempo con los devtools de Pinia Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Persistencia y devtools de Pinia»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Pinia frente a Vuex: por qué cambiar
- defineStore: estado, getters y actions
- Composición de stores y acceso entre stores
- Persistencia y devtools de Pinia