Что такое Pinia

Pinia — что это?

Pinia — это хранилище состояния (state manager) для Vue.
Проще:

Pinia = глобальное хранилище данных приложения

---

Зачем нужна Pinia

Когда нужно:

• хранить данные между компонентами

• не передавать props на 5 уровней вниз

• иметь единый источник правды

Примеры данных в Pinia:

• пользователь (user)

• авторизация

• корзина

• настройки

• данные с API

---

Pinia vs Vuex

Vuex	Pinia
Старый стандарт	Новый стандарт ✅
Сложный синтаксис	Простой
Много boilerplate	Минимум кода
Vue 2 / 3	Vue 3 (рекомендуется)

👉 Pinia официально заменила Vuex

---

Простой пример Pinia

1️⃣ Store

// stores/user.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'Alex',
    isAuth: false
  }),

  actions: {
    login(name: string) {
      this.name = name
      this.isAuth = true
    }
  }
})

---

2️⃣ Использование в компоненте

<script setup>
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

userStore.login('Ivan')
</script>

<template>
  <div>{{ userStore.name }}</div>
</template>

---

Где подключается Pinia

В main.ts:

import { createPinia } from 'pinia'

const pinia = createPinia()

createApp(App)
  .use(pinia)
  .mount('#app')

---

В Nuxt 3

Pinia подключается автоматически:

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

---

Когда Pinia НЕ нужна

❌ Маленький проект
❌ 2–3 компонента
❌ Нет общего состояния

---

Коротко

• Pinia — глобальное состояние

• Замена Vuex

• Просто, удобно, официально

• Используется в Vue 3 и Nuxt 3

---

Если хочешь, могу:

• объяснить Pinia на примере реального проекта

• показать setup store vs options store

• разобрать твой store

Просто скажи 👍