Pinia

Pinia

Тип	Бібліотека управління станом
Автори	Едуардо Сан Мартін Мороте
Перший випуск	листопад 2019; 5 років тому (2019-11)
Стабільний випуск	2.0.29 (2023)
Платформа	Веб платформа
Мова програмування	TypeScript
Розмір	~1.5 KB
Ліцензія	MIT License
Репозиторій	github.com/vuejs/pinia
Вебсайт	pinia.vuejs.org

Pinia (вимовляється /piːnjʌ/, або «peenya» англійською) — це бібліотека сховищ та фреймворк управління станом для Vue.js.^[1] Розроблена в першу чергу для створення інтерфейсних веб-додатків, вона використовує декларативний синтаксис і пропонує власний API для управління станами. Pinia була схвалена командою Vue.js як надійна альтернатива Vuex і наразі є офіційною бібліотекою управління станом для Vue.^[2]

Огляд

На відміну від Vuex, Pinia має модульний дизайн і не передбачає мутації (mutations). Це дозволяє розробникам створювати численні сховища та імпортувати їх у компоненти за потреби. Фреймворк надає централізоване сховище з вбудованим механізмом збереження, оновлення та отримання стану програми.^[3]

Історія

Pinia була задумана розробником Vue Едуардо Сан Мартін Мороте^[4] як дослідження того, як Vuex може виглядати в майбутньому.^[5] Це передбачало створення простішого API з «меншою кількістю церемоній» і кращою підтримкою виведення типів за допомогою TypeScript.^[6] 7 лютого 2022 року він став офіційною частиною екосистеми Vue.js^[5]

Стор бібліотека (store library) походить від іспанського слова piña, що означає «ананас». За словами її творців, «ананас — це насправді група окремих квіток, які з'єднуються разом, щоб створити кілька плодів. Подібно до сторів, кожен з них народжується окремо, але всі вони з'єднуються в кінці».^[7]

Особливості

Стор (Store) стовпи

Стори в Pinia визначаються за допомогою JavaScript-об'єкта з різноманітними характеристиками, які керують їхньою поведінкою. Вони вважаються «стовпами» стору і, як показано в прикладі коду нижче, включають id, state, getters і actions.^[8]

import { createStore } from 'pinia'

export const useCounterStore = createStore({
  id: 'counter',

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

  getters: {
    doubleCount: state => state.count * 2
  },

  actions: {
    increment(amount) {
      this.state.count += amount
    }
  }
})

Підтримка Devtools

Pinia інтегрується з Vue Devtools, популярним розширенням для налагодження Vue.js додатків.^[9]

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

Фреймворк включає підтримку багатьох плагінів, включаючи Nuxt та вищезазначені Devtools.^[10]

«Гаряча» заміна модуля

Pinia дозволяє розробникам зберігати існуючі стейти (states) під час написання коду та змінювати стори без перезавантаження сторінки.

Див. також

• Vue.js

Примітки

1. Gerchev, Ivaylo (11 квітня 2022). Complex Vue 3 state management made easy with Pinia. LogRocket Blog (амер.). Процитовано 22 лютого 2023.
2. Build a To-do List App with Pinia and Vue 3. Deepgram (англ.). 12 жовтня 2022. Процитовано 22 лютого 2023.
3. Jahr, Adam. What is Pinia? - Pinia Fundamentals. Vue Mastery (англ.). Процитовано 18 січня 2023.
4. Pinia, an Alternative Vue.js Store - Vue School Blog. vueschool.io (англ.). Процитовано 17 січня 2023.
5. Mariappan (13 жовтня 2022). What makes Pinia the new default?. Frontend Weekly (англ.). Процитовано 17 січня 2023.
6. Pinia vs. Vuex: Is Pinia a good replacement for Vuex?. DEV Community 👩‍💻👨‍💻 (англ.). Процитовано 22 лютого 2023.
7. Everything Beyond State Management in Stores with Pinia. morioh.com. Процитовано 22 лютого 2023.
8. Pinia vs Vuex: Farewell Vuex, Hello Pinia! How to Get Started? | SPG Blog | Web Applications Development |. Software Planet Group (брит.). 11 січня 2023. Процитовано 17 січня 2023.
9. How To Handle State Management in Vue Using Pinia - CoderPad. coderpad.io (амер.). 27 січня 2023. Процитовано 22 лютого 2023.
10. Everything Beyond State Management in Stores with Pinia by Eduardo San Martin Morote - GitNation. portal.gitnation.org (англ.). Процитовано 18 січня 2023.

Посилання