pinia

What is pinia?

Pinia is a state management library for Vue.js applications. It serves as a store for shared state, with a simple and straightforward API. It is often used as an alternative to Vuex and provides reactive data stores that can be accessed throughout a Vue application.

What are pinia's main functionalities?

Defining a Store

This feature allows you to define a new store with a unique identifier, state, and actions. The state is reactive and can be accessed and manipulated across components.

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

Accessing Store State in Components

This code demonstrates how to access and use the store state within a Vue component. The store's reactive state is used in the template, and actions can be called to update the state.

<template>
  <div>{{ counterStore.count }}</div>
  <button @click="counterStore.increment">Increment</button>
</template>

<script setup>
import { useCounterStore } from './stores/counter';

const counterStore = useCounterStore();
</script>

Persisting State

Pinia allows for easy integration with other libraries, such as VueUse, to persist state between page reloads using local storage or other methods.

import { defineStore } from 'pinia';
import { useLocalStorage } from '@vueuse/core';

export const useUserStore = defineStore('user', {
  state: () => ({
    name: useLocalStorage('user-name', '')
  })
});

Other packages similar to pinia

vuex

Vuex is the official state management library for Vue.js. It is more complex and verbose than Pinia, with a strict set of rules and patterns such as mutations for state changes. Pinia offers a simpler and more flexible API compared to Vuex.

redux

Redux is a state management library for JavaScript apps, not limited to Vue. It uses a single immutable state tree and pure reducer functions for state updates. Redux is known for its strict unidirectional data flow, which can be more complex than Pinia's more Vue-centric and straightforward approach.

mobx

MobX is a state management library that focuses on reactive programming. It uses observables to make state management simple and scalable. Unlike Pinia, which is designed specifically for Vue, MobX can be used with any framework, and it emphasizes transparent functional reactive programming (TFRP).

README

Pinia

Intuitive, type safe and flexible Store for Vue

• 💡 Intuitive
• 🔑 Type Safe
• ⚙️ Devtools support
• 🔌 Extensible
• 🏗 Modular by design
• 📦 Extremely light

Pinia works both for Vue 2.x and Vue 3.x. It requires Vue 2 with @vue/composition-api ^1.1.0-0 or Vue ^3.2.0-0.

Pinia is is the most similar English pronunciation of the word pineapple in Spanish: piña. 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. It's also a delicious tropical fruit indigenous to South America.

👉 Demo on CodeSandbox

Help me keep working on this project 💚

• Become a Sponsor on GitHub
• One-time donation via PayPal

Gold Sponsors

Silver Sponsors

Bronze Sponsors

---

FAQ

A few notes about the project and possible questions:

Q: Does this replace Vuex, is it its successor?

A: No, or at least that's not the main intention

Q: What about dynamic modules?

A: Dynamic modules are not type safe, so instead we allow creating different stores that can be imported anywhere

Roadmap / Ideas

• Should the state be merged at the same level as actions and getters?
• Allow grouping stores together into a similar structure and allow defining new getters (pinia) You can directly call useOtherStore() inside of a getter or action.
• Getter with params that act like computed properties (@ktsn)

Installation

yarn add pinia@next
# or with npm
npm install pinia@next

If you are using Vue 2, make sure to install @vue/composition-api version 1.1.0 (or greater):

npm install pinia@next @vue/composition-api

Usage

Install the plugin

Create a pinia (the root store) and pass it to app:

import { createPinia } from 'pinia'

app.use(createPinia())

Create a Store

You can create as many stores as you want, and they should each exist in different files:

import { defineStore } from 'pinia'

// main is the name of the store. It is unique across your application
// and will appear in devtools
export const useMainStore = defineStore('main', {
  // a function that returns a fresh state
  state: () => ({
    counter: 0,
    name: 'Eduardo',
  }),
  // optional getters
  getters: {
    doubleCount() {
      return this.counter * 2
    },
    // use getters in other getters
    doubleCountPlusOne() {
      return this.doubleCount * 2 + 1
    },
  },
  // optional actions
  actions: {
    reset() {
      // `this` is the store instance
      this.counter = 0
    },
  },
})

defineStore returns a function that has to be called to get access to the store:

import { useMainStore } from '@/stores/main'

export default defineComponent({
  setup() {
    const main = useMainStore()

    return {
      // gives access to the whole store
      main,
      // gives access only to specific state
      state: computed(() => main.counter),
      // gives access to specific getter; like `computed` properties
      doubleCount: computed(() => main.doubleCount),
    }
  },
})

Documentation

To learn more about Pinia, check its documentation.

License

MIT