![]() | |
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 |
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]
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]
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]
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
}
}
})
Pinia integrates with Vue Devtools, a popular extension for debugging Vue.js applications. [9]
The framework includes support for multiple plugins, including Nuxt and the aforementioned Devtools. [10]
Pinia allows developers to maintain existing states while writing code and to modify stores without reloading the page.
![]() | |
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 |
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]
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]
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]
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
}
}
})
Pinia integrates with Vue Devtools, a popular extension for debugging Vue.js applications. [9]
The framework includes support for multiple plugins, including Nuxt and the aforementioned Devtools. [10]
Pinia allows developers to maintain existing states while writing code and to modify stores without reloading the page.