Developer

Pinia: storeToRefs, плагины, persist

↑ 5.2 Состояние: Pinia, SSOT, Vue Query · ← Предыдущая · → Следующая

Обязательно~3 мин чтенияУровень: middle

Зачем это на собесе

Расширение Pinia: сохранение состояния, плагины, безопасность данных.

Объяснение

storeToRefs(store) возвращает refs для state и getters (actions берутся напрямую).

const store = useUiStore();
const { theme, sidebarOpen } = storeToRefs(store);
const { toggleSidebar } = store;

Плагин Pinia — функция, получающая контекст (store, app, pinia, options).

const logger: PiniaPlugin = ({ store }) => {
  store.$onAction(({ name, args, after, onError }) => {
    const t = performance.now();
    after(() => console.debug(`${store.$id}.${name}`, args, `${performance.now() - t} мс`));
    onError((e) => report(e));
  });
  store.$subscribe((mutation, state) => localStorage.setItem(`pinia:${store.$id}`, JSON.stringify(state)));
};
const pinia = createPinia().use(logger);
 
declare module "pinia" { export interface PiniaCustomProperties { $api: ApiClient } }   // типизация добавленных свойств

Persist (pinia-plugin-persistedstate):

pinia.use(piniaPluginPersistedstate);
export const useSettings = defineStore("settings", () => { /* ... */ }, {
  persist: { key: "settings", storage: localStorage, pick: ["theme", "locale"] },   // только нужные поля
});

Что сохранять: тему, язык, черновики, выбранные фильтры. Чего не сохранять: токены доступа в localStorage без осознанного решения (XSS), персональные данные, кэш сервера.

Другие возможности: $state (замена состояния), pinia.state.value (SSR-гидратация), defineStore с hydrate, HMR (acceptHMRUpdate), тестирование (createTestingPinia), setActivePinia вне компонентов.

Нюансы и подводные камни

  • Не забывайте, что при SSR состояние сериализуется: только JSON-совместимое.
  • Persist при изменении структуры стора ломает старые сохранённые данные: версионируйте ключи, миграции.
  • Плагины выполняются для каждого стора — используйте фильтр по store.$id.
  • Токены лучше хранить в HttpOnly cookie.

Практика

  1. Настройте persist для темы и языка, исключив чувствительное.
  2. Напишите плагин логирования actions.
  3. Реализуйте версионирование сохранённого состояния.

Вопросы с ответами

Связанные темы

Вид графа

Обратные ссылки