Was heißt Pinia? Wie verwende ich es in Vue?

Was ist Pinia? Warum Pinia verwenden? Dieser Artikel wird Ihnen Pinia vorstellen und die grundlegende Verwendung von Pinia anhand von Beispielen vorstellen. Ich hoffe, er wird Ihnen hilfreich sein!

Was ist Pinia?

Pinia war ursprünglich ein Experiment im November 2019, bei dem das Erscheinungsbild des Vue Store mithilfe der Composition API neu gestaltet wurde. Von da an sind die ursprünglichen Prinzipien immer noch dieselben, aber Pinia funktioniert auf Vue 2 und Vue 3 und erfordert nicht die Verwendung der Kompositions-API . Abgesehen von Installation und SSR ist die API für beide die gleiche, und die Dokumentation ist spezifisch für Vue 3, mit Kommentaren zu Vue 2, wo nötig , damit sowohl Vue 2- als auch Vue 3-Benutzer sie lesen können! 【Verwandte Empfehlung: vue.js Video-Tutorial】

Warum Pinia verwenden?

Pinia ist ein Repository für Vue, mit dem Sie den Status über Komponenten/Seiten hinweg teilen können. ç Dies gilt für eine Single-Page-Anwendung, aber wenn sie serverseitig gerendert wird, wird Ihre Anwendung Sicherheitslücken ausgesetzt. Aber auch bei kleinen einseitigen Anwendungen können Sie durch die Verwendung von Pinia viele Vorteile erzielen:

• Unterstützung für Entwicklungstools
  Zeitleisten für Aktionen und Mutationen verfolgen
  • Speicher erscheinen in den Komponenten, die sie verwenden
  Zeit Reisen und einfacheres Debuggen. JS-Benutzer mit richtige TypeScript-Unterstützung oder
  • Autovervollständigung

• Serverseitige Rendering-Unterstützung

  • Einfaches Beispiel
  • So sieht die Verwendung von Pinia in Bezug auf die API aus (sehen Sie sich unbedingt
  Erste Schritte
an, um eine vollständige Anleitung zu erhalten). Sie erstellen zunächst einen Store:

• // stores/counter.js
  import { defineStore } from 'pinia'
  
  export const useCounterStore = defineStore('counter', {
    state: () => {
      return { count: 0 }
    },
    // could also be defined as
    // state: () => ({ count: 0 })
    actions: {
      increment() {
        this.count++
      },
    },
  })

  und verwenden ihn dann in einer Komponente

  :

import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counter = useCounterStore()

    counter.count++
    // with autocompletion ✨
    counter.$patch({ count: counter.count + 1 })
    // or using an action instead
    counter.increment()
  },
}

• Sie können sogar eine Funktion (ähnlich einer Komponente setup()) verwenden, um sie für eine erweiterte Verwendung zu definieren Cases A Store:

  export const useCounterStore = defineStore('counter', () => {
    const count = ref(0)
    function increment() {
      count.value++
    }
  
    return { count, increment }
  })

  Wenn Sie mit der setup()Composition API noch nicht vertraut sind, machen Sie sich keine Sorgen, Pinia unterstützt auch einen ähnlichen Satz von Map-Helfer
  , wie z. B. Vuex
. Sie definieren den Speicher auf die gleiche Weise, verwenden dann aber mapStores(), mapState() oder mapActions():

• const useCounterStore = defineStore('counter', {
    state: () => ({ count: 0 }),
    getters: {
      double: (state) => state.count * 2,
    },
    actions: {
      increment() {
        this.count++
      }
    }
  })
  
  const useUserStore = defineStore('user', {
    // ...
  })
  
  export default {
    computed: {
      // other computed properties
      // ...
      // gives access to this.counterStore and this.userStore
      ...mapStores(useCounterStore, useUserStore)
      // gives read access to this.count and this.double
      ...mapState(useCounterStore, ['count', 'double']),
    },
    methods: {
      // gives access to this.increment()
      ...mapActions(useCounterStore, ['increment']),
    },
  }

  Sie werden mehr finden Informationen zu jedem

  Kartenassistenten in Core Concepts.

Warum

Pinia

Pinia (ausgesprochen /piːnjʌ/, wie „peenya“ auf Englisch) ist piña

am nächsten (

Ananas auf Spanisch), was ein gültiger Paketname ist. Eine Ananas ist eigentlich eine Gruppe einzelner Blüten, die sich zu mehreren Früchten verbinden. Ähnlich wie bei Geschäften entsteht jedes unabhängig voneinander, aber letztendlich sind alle miteinander verbunden. Es ist auch eine köstliche tropische Frucht, die in Südamerika beheimatet ist.

Ein realistischeres Beispiel

setup()）来为更高级的用例定义一个 Store：

import { defineStore } from 'pinia'

export const todos = defineStore('todos', {
  state: () => ({
    /** @type {{ text: string, id: number, isFinished: boolean }[]} */
    todos: [],
    /** @type {'all' | 'finished' | 'unfinished'} */
    filter: 'all',
    // type will be automatically inferred to number
    nextId: 0,
  }),
  getters: {
    finishedTodos(state) {
      // autocompletion! ✨
      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') {
        // call other getters with autocompletion ✨
        return this.finishedTodos
      } else if (this.filter === 'unfinished') {
        return this.unfinishedTodos
      }
      return this.todos
    },
  },
  actions: {
    // any amount of arguments, return a promise or not
    addTodo(text) {
      // you can directly mutate the state
      this.todos.push({ text, id: this.nextId++, isFinished: false })
    },
  },
})

如果您仍然不熟悉setup()Composition API，请不要担心，Pinia 还支持一组类似的地图助手，例如 Vuex。您以相同的方式定义存储，但随后使用mapStores()、mapState()或mapActions()：

rrreee

您将在核心概念中找到有关每个地图助手的更多信息。

为什么选择Pinia

Pinia（发音为/piːnjʌ/Dies ist ein vollständigeres Beispiel der API, die Sie in Pinia, sogar in JavaScript, verwenden werden. Für einige mag dies ausreichen, um loszulegen, ohne weiter zu lesen. Wir empfehlen Ihnen jedoch dennoch, den Rest der Dokumentation zu lesen oder dieses Beispiel zu überspringen und nach dem Lesen aller „Kernkonzepte“ wiederzukommen. rrreeeVergleich mit VuexPinia versucht, der Vuex-Philosophie so nahe wie möglich zu kommen. Es wurde entwickelt, um Vorschläge für die nächste Iteration von Vuex zu testen, und es war erfolgreich, da wir derzeit einen offenen RFC für Vuex 5 mit einer API haben, die der von Pinia sehr ähnlich ist

. Bitte beachten Sie, dass ich (Eduardo), der Autor von Pinia, Teil des Vue.js-Kernteams bin und aktiv am Design von APIs wie Router und Vuex beteiligt war. Meine persönliche Absicht mit diesem Projekt war es, das Erlebnis der Nutzung eines globalen Stores neu zu gestalten und gleichzeitig die zugängliche Philosophie von Vue beizubehalten. Ich halte die API von Pinia so nah an Vuex, dass sie weiterhin weiterentwickelt wird, um es den Leuten einfacher zu machen, auf Vuex zu migrieren und in Zukunft sogar die beiden Projekte (unter Vuex) zusammenzuführen.

RFC

Während Vuex über RFCs so viel Feedback wie möglich von der Community sammelt, tut dies Pinia nicht. Ich teste Ideen basierend auf meiner Erfahrung beim Entwickeln von Apps, beim Lesen des Codes anderer Leute, bei der Arbeit für Kunden mit Pinia und beim Beantworten von Fragen auf Discord. Dadurch kann ich eine effiziente Lösung anbieten, die für eine Vielzahl von Situationen und Anwendungsgrößen geeignet ist. Ich veröffentliche häufig und entwickle die Bibliothek weiter, während ihre Kern-API unverändert bleibt.

Vergleich mit Vuex 3.x/4.x

Vuex 3.x ist Vuex für Vue 2 und Vuex 4.x ist Vue 3

Pinia API unterscheidet sich stark von Vuex ≤4, d. h. :

• Mutation existiert nicht mehr. Sie werden oft als sehr ausführlich angesehen. Sie brachten ursprünglich die Devtools-Integration mit, aber das ist kein Problem mehr.
• Es ist nicht erforderlich, benutzerdefinierte komplexe Wrapper zur Unterstützung von TypeScript zu erstellen, alles ist typisiert und die API ist so konzipiert, dass sie wann immer möglich die TS-Typinferenz nutzt.
• Keine magischen Zeichenfolgen mehr einfügen, Funktionen importieren, aufrufen – genießen Sie die automatische Vervollständigung!
• Es ist nicht nötig, Geschäfte dynamisch hinzuzufügen, sie sind alle standardmäßig dynamisch und Sie werden es nicht einmal bemerken. Beachten Sie, dass Sie sich weiterhin jederzeit manuell über den Shop anmelden können. Da dies jedoch automatisch erfolgt, müssen Sie sich keine Sorgen machen.
• Keine verschachtelten Strukturen von Modulen mehr. Sie können Geschäfte immer noch implizit verschachteln, indem Sie einen Laden innerhalb eines anderen Ladens importieren und verwenden, aber Pinia bietet eine flache Struktur und unterstützt dennoch die Kreuzkombination zwischen Geschäften. Sie können sogar zirkuläre Abhängigkeiten vom Shop haben.
Module
• ohne Namespace. Angesichts der flachen Architektur von Geschäften sind „namespaced“-Geschäfte Teil ihrer Definition, und man könnte sagen, dass alle Geschäfte einen Namensraum haben.

Ausführlichere Anweisungen zum Konvertieren eines vorhandenen Vuex ≤4-Projekts für die Verwendung von Pinia finden Sie im

Migration from Vuex Guide.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonWas heißt Pinia? Wie verwende ich es in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!