Pinia

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]

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.

• Vue.js
• Vite

• on GitHub

0.00 (0 votes) Original source: https://en.wikipedia.org/wiki/Pinia. Read more