Pinia
Pinia (вимовляється /piːnjʌ/, або «peenya» англійською) — це бібліотека сховищ та фреймворк управління станом для Vue.js.[1] Розроблена в першу чергу для створення інтерфейсних веб-додатків, вона використовує декларативний синтаксис і пропонує власний API для управління станами. Pinia була схвалена командою Vue.js як надійна альтернатива Vuex і наразі є офіційною бібліотекою управління станом для Vue.[2]
 | |
| Тип | Бібліотека управління станом |
|---|---|
| Автори | Едуардо Сан Мартін Мороте |
| Перший випуск | листопад 2019 |
| Стабільний випуск | 2.0.29 (2023) |
| Платформа | Веб платформа |
| Мова програмування | TypeScript |
| Розмір | ~1.5 KB |
| Ліцензія | MIT License |
| Репозиторій | github.com/vuejs/pinia |
| Вебсайт | pinia.vuejs.org |
Огляд
ред.На відміну від 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) під час написання коду та змінювати стори без перезавантаження сторінки.
Див. також
ред.Примітки
ред.- ↑ Gerchev, Ivaylo (11 квітня 2022). Complex Vue 3 state management made easy with Pinia. LogRocket Blog (амер.). Процитовано 22 лютого 2023.
- ↑ Build a To-do List App with Pinia and Vue 3. Deepgram (англ.). 12 жовтня 2022. Процитовано 22 лютого 2023.
- ↑ Jahr, Adam. What is Pinia? - Pinia Fundamentals. Vue Mastery (англ.). Процитовано 18 січня 2023.
- ↑ Pinia, an Alternative Vue.js Store - Vue School Blog. vueschool.io (англ.). Процитовано 17 січня 2023.
- ↑ а б Mariappan (13 жовтня 2022). What makes Pinia the new default?. Frontend Weekly (англ.). Процитовано 17 січня 2023.
- ↑ Pinia vs. Vuex: Is Pinia a good replacement for Vuex?. DEV Community 👩💻👨💻 (англ.). Процитовано 22 лютого 2023.
- ↑ Everything Beyond State Management in Stores with Pinia. morioh.com. Процитовано 22 лютого 2023.
- ↑ Pinia vs Vuex: Farewell Vuex, Hello Pinia! How to Get Started? | SPG Blog | Web Applications Development |. Software Planet Group (брит.). 11 січня 2023. Процитовано 17 січня 2023.
- ↑ How To Handle State Management in Vue Using Pinia - CoderPad. coderpad.io (амер.). 27 січня 2023. Процитовано 22 лютого 2023.
- ↑ Everything Beyond State Management in Stores with Pinia by Eduardo San Martin Morote - GitNation. portal.gitnation.org (англ.). Процитовано 18 січня 2023.