- Source: Pinia
Pinia (pronounced /piːnjʌ/, or "peenya" in English) is a store library and state management framework for Vue.js. 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.
Overview
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.
History
Pinia was conceived by Vue developer Eduardo San Martin Morote as an exploration of what Vuex could look like in the future. This involved creating a simpler API with "less ceremony" and providing better support for type inference with TypeScript. 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."
Features
= Store pillars
=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.
= Devtools support
=Pinia integrates with Vue Devtools, a popular extension for debugging Vue.js applications.
= Support for plugins
=The framework includes support for multiple plugins, including Nuxt and the aforementioned Devtools.
= Hot module replacement
=Pinia allows developers to maintain existing states while writing code and to modify stores without reloading the page.
See also
Vue.js
Vite
References
External links
Official website
pinia on GitHub