0Pricing
Vue Academy · Урок

Сохранение состояния Pinia и DevTools

pinia-plugin-persistedstate, сохранение только определённых полей и перемотка состояния во времени в DevTools Pinia

«Сохранение состояния Pinia и DevTools» — бесплатный урок Vue Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Сохранение состояния хранилища

По умолчанию состояние Pinia теряется при перезагрузке страницы. Чтобы сохранить его, используйте плагин pinia-plugin-persistedstate, который синхронизирует состояние с localStorage или sessionStorage.

Установка плагина

Зарегистрируйте плагин в экземпляре Pinia один раз. После этого любое хранилище сможет включить сохранение.

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

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

Включение сохранения для хранилища

Укажите persist: true в параметрах хранилища. Теперь всё состояние будет автоматически сохраняться и восстанавливаться.

export const useUserStore = defineStore('user', {
  state: () => ({ name: '', token: '' }),
  persist: true
})

Выбор хранилища данных

Параметр storage определяет, где сохранять данные. Используйте sessionStorage для данных, которые должны удаляться при закрытии вкладки.

persist: {
  storage: sessionStorage
}

Сохранение только некоторых полей

Параметр paths ограничивает набор сохраняемых ключей состояния. Это удобно, если нужно сохранять токен, но не временные флаги интерфейса.

persist: {
  paths: ['token', 'name'] // 'isLoading' not persisted
}

Сериализация состояния хранилища

Сохранение работает за счёт сериализации состояния в JSON. Значения должны быть безопасными для JSON — простыми объектами, массивами, строками или числами. Для функций, Map и экземпляров классов потребуется собственный сериализатор.

persist: {
  serializer: {
    serialize: JSON.stringify,
    deserialize: JSON.parse
  }
}

Инструменты разработчика Pinia

После установки Vue Devtools Pinia добавляет отдельную панель. Вы можете просматривать каждое хранилище, в реальном времени отслеживать изменения состояния и напрямую редактировать значения.

Отладка с перемещением во времени

Каждое действие отображается на временной шкале инструментов разработчика. Вы можете перемещаться во времени: вернуться к предыдущему состоянию, чтобы воспроизвести ошибку, а затем снова перейти вперёд.

SSR и гидратация хранилища

При серверной отрисовке сервер заполняет хранилище, а затем клиент должен выполнить гидратацию с теми же данными, чтобы разметка совпала. Несовпадение состояния вызывает предупреждения о гидратации.

Pinia в Nuxt

Модуль @pinia/nuxt подключает Pinia к Nuxt и автоматически обрабатывает гидратацию SSR. Состояние, заполненное во время серверной отрисовки, сериализуется в странице и восстанавливается на клиенте.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@pinia/nuxt']
})

Совместное использование сохранения и SSR

Будьте внимательны: localStorage не существует на сервере. Плагины сохранения обнаруживают это и работают только на клиенте, поэтому при гидратации SSR используются данные сервера, а затем подключаются уровни сохранения.

Быстрая проверка

Проверьте свои знания о сохранении состояния и инструментах разработчика.

Итоги

Вы изучили сохранение состояния и инструменты:

  • Плагин pinia-plugin-persistedstate сохраняет состояние в локальном или сессионном хранилище.
  • Параметры storage и paths определяют, где и какие данные сохраняются.
  • Состояние сериализуется в JSON, поэтому значения должны быть безопасными для JSON.
  • Инструменты разработчика позволяют просматривать данные в реальном времени и перемещаться во времени; @pinia/nuxt обрабатывает гидратацию SSR.

Часто задаваемые вопросы

Урок «Сохранение состояния Pinia и DevTools» бесплатный?

Да — полный текст урока «Сохранение состояния Pinia и DevTools» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Сохранение состояния Pinia и DevTools»?

pinia-plugin-persistedstate, сохранение только определённых полей и перемотка состояния во времени в DevTools Pinia Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Сохранение состояния Pinia и DevTools»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Pinia против Vuex: причины перехода
  2. defineStore: состояние, геттеры и действия
  3. Композиция хранилищ и доступ между хранилищами
  4. Сохранение состояния Pinia и DevTools
← Назад к Vue Academy