Skip to main content

Що таке Pinia?

VueJunior~1 хв читання
Запропонувати правку

Pinia - це сучасне, офіційно рекомендоване глобальне сховище стану (state management) для Vue.js. Її створили як заміну Vuex, і починаючи з Vue 3 Pinia вважається стандартом для роботи з глобальним станом.

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

Pinia - це спосіб зберігати спільні дані застосунку (користувач, кошик, налаштування) і використовувати їх у будь-якому компоненті.

Навіщо потрібна Pinia?

Коли застосунок росте, стає незручно прокидувати дані через props або тримати їх в одному компоненті. Наприклад:

  • авторизація користувача
  • кошик товарів
  • налаштування теми
  • список категорій
  • глобальні сповіщення

Ці дані потрібні різним частинам застосунку → отже, їх потрібно зберігати глобально → у Pinia.

Основні переваги Pinia

1) Простота API

Pinia легша за Vuex:

  • немає величезних шаблонів коду
  • немає обов'язкових mutations
  • мінімум церемоній
  • логіка пишеться на чистому JavaScript

2) Повна типізація з коробки (TypeScript)

Pinia створена з урахуванням TS, все типізується автоматично.

3) Реактивність як у Composition API

Можна використовувати ref і reactive прямо в store.

4) Підтримка SSR, DevTools і Hot Module Reload

Дуже зручна у великих проєктах.

5) Легкий поділ на модулі

Кожен store - як окремий модуль:

javascript
user store cart store products store theme store

Простий приклад: створення сховища

stores/user.js

javascript
import { defineStore } from 'pinia' export const useUserStore = defineStore('user', { state: () => ({ user: null, isLoggedIn: false }), actions: { login(user) { this.user = user this.isLoggedIn = true }, logout() { this.user = null this.isLoggedIn = false } } })

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

javascript
<script setup> import { useUserStore } from '@/stores/user' const userStore = useUserStore() console.log(userStore.user) userStore.login({ name: "Tim" }) </script>

Які сутності є в Pinia?

Pinia store складається з:

state

Сховище даних (реактивне):

javascript
state: () => ({ count: 0 })

getters

Аналог computed:

javascript
getters: { doubleCount(state) { return state.count * 2 } }

actions

Методи твого стора:

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

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

Коли:

  • дані потрібні кільком компонентам
  • дані мають жити між сторінками
  • потрібно уникати «прокидування props через 5 рівнів»
  • потрібно централізовано зберігати користувача, товари, налаштування, фільтри
  • тобі потрібно кешувати API-запити

Підсумок (коротко)

Pinia - це просте, сучасне та гнучке глобальне сховище стану для Vue.js.

Вона:

  • замінює Vuex,
  • працює як Composition API,
  • проста, typed-friendly,
  • дозволяє легко ділитися станом між компонентами.

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

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

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

Запропонувати правку