Pinia: state, getters, actions

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

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

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

Pinia — стандартный стор Vue 3. Спрашивают структуру и как работать с реактивностью.

Объяснение

// stores/auth.ts
export const useAuthStore = defineStore("auth", {
  state: () => ({ user: null as User | null, token: "" as string, loading: false }),
  getters: {
    isAuthenticated: (s) => !!s.token,
    fullName(): string { return `${this.user?.first ?? ""} ${this.user?.last ?? ""}`.trim(); },
    hasRole: (s) => (role: string) => s.user?.roles.includes(role) ?? false,      // геттер-функция
  },
  actions: {
    async login(email: string, password: string) {
      this.loading = true;
      try { const r = await api.login(email, password); this.user = r.user; this.token = r.token; }
      finally { this.loading = false; }
    },
    logout() { this.$reset(); },
  },
});

<script setup>
const auth = useAuthStore();
const { user, isAuthenticated } = storeToRefs(auth);      // реактивная деструктуризация state/getters
const { login } = auth;                                    // actions деструктурируются напрямую
</script>

Часть	Аналог	Правила
state	data	функция, возвращающая объект; типизируйте
getters	computed	кэшируются, могут использовать другие getters, принимать аргументы через возврат функции
actions	methods	синхронные и асинхронные, любая логика, доступ к this

Особенности:

• Мутировать state можно напрямую (store.count++), через $patch({...}) (пакетно) или в actions.
• store.$reset(), $subscribe (реакция на изменения), $onAction (перехват actions), $state.
• Сторы можно вызывать друг из друга (внутри actions).
• Отладка: Vue DevTools показывает состояние, историю изменений, time travel.
• Нет мутаций (в отличие от Vuex) и вложенных модулей — каждый стор независим.

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

• Деструктуризация state без storeToRefs теряет реактивность.
• Использование стора вне компонента (например, в роутере) — только после app.use(pinia) или с передачей pinia.
• Getter с аргументом не кэшируется (возвращает функцию).
• Нельзя хранить в state несериализуемое (для SSR/devtools), исключение — осознанные.

Практика

1. Создайте auth-стор с логином, выходом и геттерами ролей.
2. Используйте $patch и $subscribe для сохранения в localStorage.
3. Вызовите один стор из другого.

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

Из чего состоит Pinia-стор?

Из state, getters и actions (аналоги data, computed, methods).

Зачем storeToRefs?

Чтобы деструктурировать state и getters, сохранив реактивность.

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

• Зачем нужен state manager, локальное и глобальное состояние
• Pinia: Options и Setup stores