Pinia

Pinia

Original author(s)	Eduardo San Martin Morote
Initial release	November 2019 (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. 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.

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.

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

External links

• Official website
• pinia on GitHub