So verwenden Sie Pinia in Vue3

Pinia ist ein Repository für Vue, mit dem Sie den Status über Komponenten/Seiten hinweg teilen können. Um Pinia in Vue 3 zu verwenden, können Sie die folgenden Schritte ausführen:

Pinia installieren: Installieren Sie Pinia in Ihrem Vue 3-Projekt über npm oder Yarn

npm install pinia

Erstellen Sie einen Pinia-Store: Erstellen Sie in Ihrem Projekt einen Pinia-Store, der Ihren Anwendungsstatus und die zugehörige Logik enthält

// store.js
import { createPinia } from 'pinia';

const pinia = createPinia();

export default pinia;

main.jsRegistrieren Sie den Pinia-Speicher: Registrieren Sie den Pinia-Speicher in  Ihrer Bewerbungseintragsdatei (normalerweise 

import { createApp } from 'vue';
import pinia from './store';
import App from './App.vue';

const app = createApp(App);
app.use(pinia);
app.mount('#app');

Pinia-Module erstellen und verwenden: In  store.js Dateien können Sie ein Pinia-Modul erstellen und exportieren 

// store.js
import { defineStore } from 'pinia';

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

Verwenden von Pinia-Modulen in Komponenten: In Ihren Vue 3-Komponenten können Sie  useStore Funktionen verwenden, um eine Instanz des Pinia-Moduls abzurufen 

<template>
  <div>
    <p>Count: {
   
   { count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { useCounterStore } from './store';

export default {
  setup() {
    const counterStore = useCounterStore();

    return {
      count: counterStore.count,
      increment: counterStore.increment,
      decrement: counterStore.decrement,
    };
  },
};
</script>

Im obigen Beispiel importieren wir zunächst useCounterStoredie Funktion, um eine Instanz von CounterStore zu erhalten. Anschließend setupverwenden wir die Eigenschaften und Methoden dieser Instanz in der Hook-Funktion der Komponente.

Auf diese Weise können Sie Pinia in Vue 3 verwenden, um den Status Ihrer Anwendung zu verwalten. Sie können mehrere Pinia-Module erstellen, um verschiedene Zustände zu verwalten, und diese Module in Komponenten verwenden.