Introducción a la pinia

1. Introducción

Pinia se rediseñó originalmente para usar la API de composición alrededor de noviembre de 2019. A partir de entonces, los principios originales siguen siendo los mismos, pero Pinia funciona tanto para Vue 2 como para Vue 3.

Pinia (pronunciado  /piːnjʌ/, como "peenya" en inglés) es lo más parecido a un nombre de paquete válido,  piña ( piña en español ). Una piña es en realidad un grupo de flores individuales que se unen para formar múltiples frutos. Al igual que Store, cada uno nació de forma independiente, pero al final todos están conectados entre sí. También es una deliciosa fruta tropical originaria de América del Sur.

1. ¿Por qué utilizar Pinia?

Pinia es un repositorio para Vue que le permite compartir el estado entre componentes/páginas.

Esto es cierto para una aplicación de una sola página, pero si se procesa en el lado del servidor, expondrá su aplicación a vulnerabilidades de seguridad . Pero incluso en aplicaciones pequeñas de una sola página, puedes obtener muchos beneficios al usar Pinia:

• soporte de herramientas de desarrollo
  • Seguimiento de cronogramas de acciones y mutaciones.
  • Las tiendas aparecen en los componentes que las utilizan.
  • Viaje en el tiempo y depuración más sencilla.
• Reemplazo de módulo caliente
  • Modifica tu Store sin recargar la página
  • Mantener cualquier estado existente mientras se desarrolla.
• Complementos: utilice complementos para ampliar la funcionalidad de Pinia
• Compatibilidad adecuada con TypeScript o autocompletado para usuarios de JS 
• Soporte de renderizado del lado del servidor

Utilice pinia para implementar una demostración:

import { defineStore } from 'pinia'

export const todos = defineStore('todos', {
  state: () => ({
    todos: [],
    filter: 'all',
    nextId: 0,
  }),
  getters: {
    finishedTodos(state) {
      // 自动完成! ✨
      return state.todos.filter((todo) => todo.isFinished)
    },
    unfinishedTodos(state) {
      return state.todos.filter((todo) => !todo.isFinished)
    },
    /**
     * @returns {
   
   { text: string, id: number, isFinished: boolean }[]}
     */
    filteredTodos(state) {
      if (this.filter === 'finished') {
        // 自动调用其他 getter ✨
        return this.finishedTodos
      } else if (this.filter === 'unfinished') {
        return this.unfinishedTodos
      }
      return this.todos
    },
  },
  actions: {
    // 任何数量的参数，返回一个 Promise 或者不返回
    addTodo(text) {
      // 你可以直接改变状态
      this.todos.push({ text, id: this.nextId++, isFinished: false })
    },
  },
})

2. Comparación con Vuex Comparación con -vuex-

Pinia comenzó como una exploración de cómo sería la próxima versión de Vuex, incorporando muchas ideas de las discusiones del equipo central de Vuex 5. Finalmente, nos dimos cuenta de que Pinia ya implementó la mayor parte de lo que queríamos en Vuex 5 y decidimos implementarlo con la nueva propuesta.

En comparación con Vuex, Pinia proporciona una API más simple con menos especificaciones, proporciona una API de estilo API de composición y, lo más importante, tiene soporte confiable de inferencia de tipos cuando se usa con TypeScript.

3. Comparación con Vuex 3.x/4.x

Vuex 3.x es Vue 2 de Vuex y Vuex 4.x es Vue 3

Pinia API es muy diferente de Vuex ≤4, a saber:

• Las mutaciones  ya no existen. A menudo se los considera  muy  detallados . Originalmente trajeron la integración de devtools, pero eso ya no es un problema.
• No es necesario crear contenedores complejos personalizados para admitir TypeScript, todo está escrito y la API está diseñada de manera que aproveche la inferencia de tipos TS siempre que sea posible.
• ¡No más inyectar, importar funciones, llamar funciones y disfrutar del autocompletado!
• No es necesario agregar tiendas dinámicamente, todas son dinámicas de forma predeterminada y ni siquiera lo notarás. Tenga en cuenta que aún puede registrarse manualmente en la Tienda en cualquier momento, pero como es automático, no debe preocuparse.
• No más  estructuras anidadas de módulos  .  Todavía puedes anidar implícitamente una tienda  importándola y usándola en otra tienda  , pero Pinia proporciona una estructura plana por diseño y al mismo tiempo admite la combinación cruzada entre tiendas. Incluso puedes tener dependencias circulares para una Store .
• No hay  módulos de espacio de nombres . Dada la arquitectura plana de una Tienda, el "espacio de nombres" de una Tienda es inherente a la forma en que se define, y se podría decir que todas las Tiendas tienen espacios de nombres.