vuejs-ai/vue-pinia-best-practices

Was macht vue-pinia-best-practices?

Pinia Stores, State-Management-Muster, Store-Setup und Reaktivität mit Stores.

Einführung

Dieser Skill enthält Best Practices für die Arbeit mit Pinia in Vue.js-Anwendungen. Pinia ist ein intuitives, typsicheres und leichtgewichtiges State-Management-Tool, das die Erstellung und Verwaltung von Stores vereinfacht.

Hauptkonzepte

Store-Definition

Ein Store wird mit defineStore definiert. Es gibt zwei Hauptansätze:

• Options-API: Ähnlich wie bei Vue-Komponenten, mit state, getters und actions.
• Composition-API: Verwendet Setup-Funktionen, ähnlich wie setup() in Komponenten.

Beispiel Options-API:

import { defineStore } from 'pinia'

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

Beispiel Composition-API:

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)

  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

Reaktivität mit Stores

Pinia Stores sind reaktiv. Wenn Sie einen Store in einer Komponente verwenden, reagiert die Komponente automatisch auf Änderungen der Store-Daten.

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

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

    return {
      counter
    }
  }
}

State-Management-Muster

• Einzelner Store: Verwenden Sie einen einzelnen Store für kleine Anwendungen.
• Mehrere Stores: Trennen Sie Logik in mehrere Stores für größere Anwendungen.
• Store-übergreifende Kommunikation: Nutzen Sie Actions, um Daten zwischen Stores auszutauschen, oder verwenden Sie den $reset()-Befehl.

Best Practices

• Verwenden Sie die Composition-API für mehr Flexibilität und Typsicherheit.
• Halten Sie Stores klein und fokussiert auf eine bestimmte Funktionalität.
• Nutzen Sie Getters für abgeleitete Zustände, um Code-Duplizierung zu vermeiden.
• Aktionsnamen: Verwenden Sie aussagekräftige Namen für Actions.
• Fehlerbehandlung: Fügen Sie Fehlerbehandlung in Actions hinzu.

Beispielprojekt

Ein einfaches Beispiel, das einen Zähler-Store verwendet:

// stores/counter.js
import { defineStore } from 'pinia'

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

// components/Counter.vue
<template>
  <div>
    <p>Zähler: {{ counter.count }}</p>
    <button @click="counter.increment">Erhöhen</button>
  </div>
</template>

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

const counter = useCounterStore()
</script>

Weitere Informationen

Weitere Details finden Sie in der offiziellen Pinia-Dokumentation.