Primeros Pasos ​

Instalación ​

Obtén la Cheat Sheet de Pinia de Vue Mastery

Instala pinia con tu gestor de paquetes favorito:

yarn add pinia
# o con npm
npm install pinia

yarn add pinia
# o con npm
npm install pinia

Si estás usando Vue CLI puedes darle una oportunidad a este plugin no oficial

Crea una instancia de Pinia (la raíz del almacén) y pásasela a la aplicación como si fuese un plugin:

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

Si estás usando Vue 2 tendrás que instalar un plugin e inyectar la pinia creada en la raíz de la aplicación:

import { createPinia, PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  el: '#app',
  // otras opciones...
  // ...
  // cabe destacar que la misma instancia de  `pinia` puede ser
  // usada en múltiples aplicaciones de Vue en la misma página
  pinia,
})

import { createPinia, PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  el: '#app',
  // otras opciones...
  // ...
  // cabe destacar que la misma instancia de  `pinia` puede ser
  // usada en múltiples aplicaciones de Vue en la misma página
  pinia,
})

Esto también añade soporte para las herramientas de desarrollo. En Vue 3 algunas características como volver para atrás y editar no están todavía disponibles porque vue-devtools no muestra las APIs necesarias aún pero las herramientas de desarrollo tienen muchas más características y la experiencia de desarrollo está a otro nivel. En Vue 2, Pinia usa la ya existente interfaz para Vuex (y por tanto no se pueden usar a la vez).

¿Qué es un Almacén? ​

Un almacén (como Pinia) es una entidad que contiene el estado y la lógica de negocio que no está vinculada al árbol de componentes. En otras palabras, contiene el estado global. Es como si fuese un componente que está siempre ahí y todos los demás pueden leerlo y escribirlo. Tiene tres conceptos, el estado, getters y acciones y es seguro afirmar que estos conceptos son equivalentes a datos, propiedades computadas y métodos de los componentes.

¿Cuándo debería usar un Almacén? ​

Un almacén debería contener datos que pudiesen ser accesibles a lo largo de una aplicación. Esto incluye los datos que son usados en muchos sitios, como por ejemplo información del usuario que se está mostrando en la barra de navegación, así como datos que necesiten ser conservados entre páginas, como por ejemplo un formulario muy complejos con muchos pasos.

Por otro lado, deberías evitar incluir en el almacén datos que pueden ser guardados en un componente, como por ejemplo la visibilidad de un elemento de una página concreta.

No todas las aplicaciones necesitan acceso a un estado global, pero si la tuya lo necesita Pinia hará tu vida más sencilla.