# Что такое Pinia

## **Pinia** — что это?

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

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

---

## Зачем нужна Pinia

Когда нужно:

- хранить данные **между компонентами**
- не передавать props на 5 уровней вниз
- иметь **единый источник правды**

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

- пользователь (user)
- авторизация
- корзина
- настройки
- данные с API

---

## Pinia vs Vuex

<table id="bkmrk-vuex-pinia-%D0%A1%D1%82%D0%B0%D1%80%D1%8B%D0%B9-%D1%81%D1%82"><thead><tr><th>Vuex</th><th>Pinia</th></tr></thead><tbody><tr><td>Старый стандарт</td><td>Новый стандарт ✅</td></tr><tr><td>Сложный синтаксис</td><td>Простой</td></tr><tr><td>Много boilerplate</td><td>Минимум кода</td></tr><tr><td>Vue 2 / 3</td><td>**Vue 3 (рекомендуется)**</td></tr></tbody></table>

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

---

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

### 1️⃣ Store

```ts
// 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️⃣ Использование в компоненте

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

const userStore = useUserStore()

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

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

```

---

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

В **`main.ts`**:

```ts
import { createPinia } from 'pinia'

const pinia = createPinia()

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

```

---

## В Nuxt 3

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

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

```

---

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

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

---

## Коротко

- **Pinia** — глобальное состояние
- Замена **Vuex**
- Просто, удобно, официально
- Используется в Vue 3 и Nuxt 3

---