Що таке Pinia?

VueJunior~1 хв читання

Pinia - це сучасний, офіційний менеджер стану (state manager) для Vue.js. Він є рекомендованим стором для Vue 3 і повністю замінює Vuex.

Простіше кажучи:

Pinia - це зручне централізоване сховище даних, побудоване на Composition API, з мінімальним boilerplate, без мутацій і з чудовою типізацією.

Чому Pinia? (ключові факти для співбесіди)

офіційно підтримується командою Vue
простіша, ніж Vuex
не використовує мутації (тільки state + getters + actions)
працює на Composition API → компактний і читабельний код
чудова підтримка TypeScript
сумісна з Vue DevTools
автоматично оптимізує reactivity
ідеально підходить для Vue 3

Простий приклад Pinia стору

store/counter.js

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),

  actions: {
    increment() {
      this.count++
    }
  },

  getters: {
    double: (state) => state.count * 2
  }
})

Використання в компоненті:

<script setup>
import { useCounterStore } from '@/store/counter'

const counter = useCounterStore()

counter.increment()
console.log(counter.count)
</script>

Ключові особливості Pinia

1. Немає мутацій (на відміну від Vuex)

У Vuex було так:

state → mutation → action → component

У Pinia - набагато простіше:

state → action → component

Ми можемо змінювати state прямо всередині action:

this.count++

2. Чудова підтримка TypeScript

Pinia була створена з урахуванням TS, на відміну від Vuex, який «допилювали».

3. Hot Module Replacement (HMR)

Під час розробки можна змінювати store без перезавантаження сторінки.

4. Підтримка плагінів

Pinia можна розширювати:

persist (збереження в localStorage)
logging
analytics
caching

5. SSR-дружність

Pinia коректно працює з:

Nuxt 3
Vite SSR
серверним рендерингом

Коли використовувати Pinia?

SPA зі складним станом
застосунки з авторизацією
магазини, де є кошик
особисті кабінети
панелі керування (admin)
проєкти, де важлива типізація
real-time застосунки

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.