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

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

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

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

Особливості

Стор (Store) стовпи Стори в Pinia визначаються за допомогою JavaScript-об'єкта з різноманітними характеристиками, які керують їхньою поведінкою. Вони вважаються «стовпами» стору і, як показано в прикладі коду нижче, включають id, state, getters і actions.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 додатків.

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

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

Див. також

Vue.js

Примітки

Посилання