Pinia (pronounced /piːnjʌ/, or "peenya" in English) is a store library and state management framework for Vue.js.[1] Designed primarily for building front-end web applications, it uses declarative syntax and offers its own state management API. Pinia was endorsed by the Vue.js team as a credible alternative to Vuex and is currently the official state management library for Vue.[2]
 | |
| Original author(s) | Eduardo San Martin Morote |
|---|---|
| Initial release | November 2019 |
| Stable release | 2.1.7
/ 13 Oct 2023 |
| Repository | github |
| Written in | TypeScript |
| Platform | Web platform |
| Predecessor | Vuex |
| Size | ~1.5 KB |
| Type | State management library |
| License | MIT License |
| Website | pinia |
Overview edit
Unlike Vuex, Pinia is modular by design and does not include mutations. This enables developers to create numerous stores and import them into components as needed. The framework provides a centralised store with a built-in mechanism for saving, updating and retrieving application state.[3]
History edit
Pinia was conceived by Vue developer Eduardo San Martin Morote[4] as an exploration of what Vuex could look like in the future.[5] This involved creating a simpler API with "less ceremony" and providing better support for type inference with TypeScript.[6] It became an official part of the Vue.js ecosystem on February 7, 2022.[5]
The store library takes its name from piña, the Spanish word for "pineapple." According to its creators, "a pineapple is in reality a group of individual flowers that join together to create a multiple fruit. Similar to stores, each one is born individually, but they are all connected at the end."[7]
Features edit
Store pillars edit
Stores in Pinia are defined via a JavaScript object with a variety of characteristics that govern their behaviour. These are regarded as the "pillars" of a store, and as shown in the code example below, include id, state, getters and 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 support edit
Pinia integrates with Vue Devtools, a popular extension for debugging Vue.js applications.[9]
Support for plugins edit
The framework includes support for multiple plugins, including Nuxt and the aforementioned Devtools.[10]
Hot module replacement edit
Pinia allows developers to maintain existing states while writing code and to modify stores without reloading the page.
See also edit
References edit
- ^ Gerchev, Ivaylo (2022-04-11). "Complex Vue 3 state management made easy with Pinia". LogRocket Blog. Retrieved 2023-02-22.
- ^ "Build a To-do List App with Pinia and Vue 3". Deepgram. 2022-10-12. Retrieved 2023-02-22.
- ^ Jahr, Adam. "What is Pinia? - Pinia Fundamentals". Vue Mastery. Retrieved 2023-01-18.
- ^ "Pinia, an Alternative Vue.js Store - Vue School Blog". vueschool.io. Retrieved 2023-01-17.
- ^ a b Mariappan (2022-10-13). "What makes Pinia the new default?". Frontend Weekly. Retrieved 2023-01-17.
- ^ "Pinia vs. Vuex: Is Pinia a good replacement for Vuex?". DEV Community 👩💻👨💻. Retrieved 2023-02-22.
- ^ "Everything Beyond State Management in Stores with Pinia". morioh.com. Retrieved 2023-02-22.
- ^ "Pinia vs Vuex: Farewell Vuex, Hello Pinia! How to Get Started? | SPG Blog | Web Applications Development |". Software Planet Group. 2023-01-11. Retrieved 2023-01-17.
- ^ "How To Handle State Management in Vue Using Pinia - CoderPad". coderpad.io. 2023-01-27. Retrieved 2023-02-22.
- ^ "Everything Beyond State Management in Stores with Pinia by Eduardo San Martin Morote - GitNation". portal.gitnation.org. Retrieved 2023-01-18.