0Pricing
Vue Academy · Lesson

Pinia Persistence and Devtools

pinia-plugin-persistedstate, persisting only specific fields, Pinia devtools time-travel.

Persisting Store State

By default, Pinia state is lost on page reload. To keep it, use the pinia-plugin-persistedstate plugin, which syncs state to localStorage or sessionStorage.

Installing the Plugin

Register the plugin on the Pinia instance once. Every store can then opt in.

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

All lessons in this course

  1. Pinia vs Vuex: Why the Switch
  2. defineStore: State, Getters, Actions
  3. Composing Stores and Cross-Store Access
  4. Pinia Persistence and Devtools
← Back to Vue Academy