Pinia

Short description: Open-source web development framework

Pinia

Original author(s)| Eduardo San Martin Morote
Initial release| November 2019; 6 years ago (2019-11)
Stable release|

2.1.7 / 13 Oct 2023

Repository| github.com/vuejs/pinia
Written in| TypeScript
Platform| Web platform
Predecessor| Vuex
Size| ~1.5 KB
Type| State management library
License| MIT License
Website| pinia.vuejs.org

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]

## Contents

* 1 Overview
* 2 History
* 3 Features
* 3.1 Store pillars
* 3.2 Devtools support
* 3.3 Support for plugins
* 3.4 Hot module replacement
* 4 See also
* 5 References
* 6 External links

## 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.[3]

## History

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

### 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.[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

Pinia integrates with Vue Devtools, a popular extension for debugging Vue.js applications.[9]

### Support for plugins

The framework includes support for multiple plugins, including Nuxt and the aforementioned Devtools.[10]

### 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

1. ↑ Gerchev, Ivaylo (2022-04-11). "Complex Vue 3 state management made easy with Pinia" (in en-US). https://blog.logrocket.com/complex-vue-3-state-management-pinia/.
2. ↑ "Build a To-do List App with Pinia and Vue 3" (in en). 2022-10-12. https://blog.deepgram.com/build-a-todo-list-with-pinia-and-vue-3/.
3. ↑ Jahr, Adam. "What is Pinia? - Pinia Fundamentals" (in en). https://www.vuemastery.com/courses/pinia-fundamentals/fundamentals-what-is-pinia.
4. ↑ "Pinia, an Alternative Vue.js Store - Vue School Blog" (in en). https://vueschool.io/articles/vuejs-tutorials/pinia-an-alternative-vue-js-store/.
5. ↑ 5.0 5.1 Mariappan (2022-10-13). "What makes Pinia the new default?" (in en). https://medium.com/front-end-weekly/what-makes-pinia-the-new-default-d29c5359de15.
6. ↑ "Pinia vs. Vuex: Is Pinia a good replacement for Vuex?" (in en). https://dev.to/logrocket/pinia-vs-vuex-is-pinia-a-good-replacement-for-vuex-2k03.
7. ↑ "Everything Beyond State Management in Stores with Pinia". https://morioh.com/p/8c2132fc6eeb.
8. ↑ "Pinia vs Vuex: Farewell Vuex, Hello Pinia! How to Get Started? | SPG Blog | Web Applications Development |" (in en-GB). 2023-01-11. https://softwareplanetgroup.co.uk/piniavsvuex/.
9. ↑ "How To Handle State Management in Vue Using Pinia - CoderPad" (in en-US). 2023-01-27. https://coderpad.io/blog/development/how-to-handle-state-management-in-vue-using-pinia/.
10. ↑ "Everything Beyond State Management in Stores with Pinia by Eduardo San Martin Morote - GitNation" (in en). https://portal.gitnation.org/contents/everything-beyond-state-management-in-stores-with-pinia.

## External links

* on GitHub

0.00

(0 votes)

Original source: https://en.wikipedia.org/wiki/Pinia. Read more

|

Retrieved from "https://handwiki.org/wiki/index.php?title=Software:Pinia&oldid=2568633"