Pinia | |
Author: | Eduardo San Martin Morote |
Latest Release Version: | 2.1.7 |
Latest Release Date: | 13 Oct 2023 |
Programming Language: | TypeScript |
Platform: | Web platform |
Replaces: | Vuex |
Size: | ~1.5 KB |
Genre: | State management library |
License: | MIT License |
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.
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]
export const useCounterStore = createStore
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.