Gemeinsamer Zustand

Bibliothek:ReactVue

Kurz gesagt: Gemeinsamer Zustand kommt in Vue von provide/inject oder einem Pinia-Store, und die Komponenten lesen ihn direkt, ohne Props durch jede Ebene.

Problem

Der Zähler zeigt wieder 0

Der Warenkorb ist nach App hochgereicht, wie in der Lektion über das Hochreichen des Zustands. Von dort geht er als Props nach unten: zu Header und von dort zu CartBadge, zu Catalog, von dort zu ProductList und von dort zu jeder ProductCard. Jemand hat Header umgeschrieben, und der Zähler ist stehen geblieben.

Vue

App.vueHeader.vueCartBadge.vueCatalog.vueProductList.vueProductCard.vuemoney.jsstyle.css

<script setup>
import { ref, computed } from 'vue';
import Header from './Header.vue';
import Catalog from './Catalog.vue';

const items = ref([]);
const count = computed(() => items.value.reduce((sum, i) => sum + i.qty, 0));

function add(product) {
  const found = items.value.find((i) => i.id === product.id);
  if (found) found.qty++;
  else items.value.push({ ...product, qty: 1 });
}
</script>

<template>
  <Header :count="count" />
  <main>
    <Catalog :items="items" @add="add" />
  </main>
</template>
 

<script setup> import { ref, computed } from 'vue'; import Header from './Header.vue'; import Catalog from './Catalog.vue'; const items = ref([]); const count = computed(() => items.value.reduce((sum, i) => sum + i.qty, 0)); function add(product) { const found = items.value.find((i) => i.id === product.id); if (found) found.qty++; else items.value.push({ ...product, qty: 1 }); } </script> <template> <Header :count="count" /> <main> <Catalog :items="items" @add="add" /> </main> </template>

<script setup>
import CartBadge from './CartBadge.vue';
</script>

<template>
  <header>
    <a href="/">Der Shop</a>
    <CartBadge />
  </header>
</template>
 

<script setup> import CartBadge from './CartBadge.vue'; </script> <template> <header> <a href="/">Der Shop</a> <CartBadge /> </header> </template>

<script setup>
defineProps({ count: { type: Number, default: 0 } });
</script>

<template>
  <a href="/cart">Warenkorb ({{ count }})</a>
</template>
 

<script setup> defineProps({ count: { type: Number, default: 0 } }); </script> <template> <a href="/cart">Warenkorb ({{ count }})</a> </template>

<script setup>
import ProductList from './ProductList.vue';

defineProps(['items']);
const emit = defineEmits(['add']);
</script>

<template>
  <section>
    <h1>Produkte</h1>
    <ProductList :items="items" @add="(product) => emit('add', product)" />
  </section>
</template>
 

<script setup> import ProductList from './ProductList.vue'; defineProps(['items']); const emit = defineEmits(['add']); </script> <template> <section> <h1>Produkte</h1> <ProductList :items="items" @add="(product) => emit('add', product)" /> </section> </template>

<script setup>
import ProductCard from './ProductCard.vue';

const PRODUCTS = [
  { id: 1, name: 'Weißbrot', price: 1.2 },
  { id: 5, name: 'Frischmilch', price: 1.6 },
  { id: 7, name: 'Weißkäse', price: 7.9 },
];

const props = defineProps(['items']);
const emit = defineEmits(['add']);
const qtyOf = (id) => props.items.find((i) => i.id === id)?.qty ?? 0;
</script>

<template>
  <ul>
    <ProductCard
      v-for="p in PRODUCTS"
      :key="p.id"
      :product="p"
      :qty="qtyOf(p.id)"
      @add="(product) => emit('add', product)"
    />
  </ul>
</template>
 

<script setup> import ProductCard from './ProductCard.vue'; const PRODUCTS = [ { id: 1, name: 'Weißbrot', price: 1.2 }, { id: 5, name: 'Frischmilch', price: 1.6 }, { id: 7, name: 'Weißkäse', price: 7.9 }, ]; const props = defineProps(['items']); const emit = defineEmits(['add']); const qtyOf = (id) => props.items.find((i) => i.id === id)?.qty ?? 0; </script> <template> <ul> <ProductCard v-for="p in PRODUCTS" :key="p.id" :product="p" :qty="qtyOf(p.id)" @add="(product) => emit('add', product)" /> </ul> </template>

<script setup>
import { money } from './money.js';

defineProps(['product', 'qty']);
const emit = defineEmits(['add']);
</script>

<template>
  <li>
    <span>{{ product.name }}, {{ money(product.price) }}</span>
    <span v-if="qty > 0">Im Warenkorb: {{ qty }}</span>
    <button type="button" :aria-label="`Hinzufügen ${product.name}`" @click="emit('add', product)">
      Hinzufügen
    </button>
  </li>
</template>
 

<script setup> import { money } from './money.js'; defineProps(['product', 'qty']); const emit = defineEmits(['add']); </script> <template> <li> <span>{{ product.name }}, {{ money(product.price) }}</span> <span v-if="qty > 0">Im Warenkorb: {{ qty }}</span> <button type="button" :aria-label="`Hinzufügen ${product.name}`" @click="emit('add', product)"> Hinzufügen </button> </li> </template>

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';
 

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

body { font-family: system-ui, sans-serif; margin: 0; }
header { display: flex; justify-content: space-between; background: #f3efe6; padding: 8px 16px; }
main { padding: 0 16px; }
ul { list-style: none; padding: 0; }
li { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
li span:first-child { flex: 1; }
button { font: inherit; }
 

body { font-family: system-ui, sans-serif; margin: 0; } header { display: flex; justify-content: space-between; background: #f3efe6; padding: 8px 16px; } main { padding: 0 16px; } ul { list-style: none; padding: 0; } li { display: flex; gap: 8px; align-items: center; margin: 6px 0; } li span:first-child { flex: 1; } button { font: inherit; }

▶ AusführenCode zurücksetzen

Leg Weißbrot, Frischmilch und noch einmal Weißbrot hinein. Die Karten zählen, und im Kopfbereich steht „Warenkorb (0)“. App gibt count an Header, aber das neue Header gibt es nicht an CartBadge weiter. Header nutzt den Warenkorb nicht. Es sollte ihn nur weiterreichen, und genau das hat es vergessen.

Die Idee

Ein Provider oben, Konsumenten unten

Daten durch Komponenten zu reichen, die sie nicht nutzen, heißt Prop Drilling. Bei zwei Ebenen ist das normal. Bei fünf hängt jede Komponente auf dem Weg vom Warenkorb ab, und eine vergessene Prop reißt die Kette.

Beide Bibliotheken haben einen Weg, Daten an entfernte Nachkommen zu geben, ohne die Komponenten dazwischen:

1. Der Provider ist die Komponente, der die Daten gehören. Er sagt: „Alles unter mir darf das lesen.“
2. Der Konsument ist die Komponente, die sie nutzt. Sie nimmt sie direkt, egal wie viele Ebenen dazwischen liegen.

In Vue sind das provide und inject:

App.vue

<script setup>
const items = ref([]);
const count = computed(() => items.value.reduce((sum, i) => sum + i.qty, 0));
provide('cart', { items, count, add });
</script>

<!-- CartBadge.vue -->
<script setup>
const { count } = inject('cart');
</script>

provide('cart', …) gibt einen Wert unter einem Schlüssel an alle Nachkommen der Komponente. inject('cart') nimmt ihn vom nächsten Vorfahren, der ihn bereitgestellt hat. Weitergegeben werden die Refs (items, count), nicht ihre Werte, damit die Konsumenten reaktiv bleiben.

Die Daten haben weiterhin einen Besitzer, und die Änderungen laufen weiter über ihn: add ist die Funktion des Providers. Nur der Weg hat sich geändert.

Sieh es dir an

Sieh dir die beiden Wege an

Zuerst geht der Warenkorb Ebene für Ebene nach unten, und die Kette reißt in der Mitte. Dann wird App zum Provider, und beide Konsumenten lesen direkt.

<script setup>
const items = ref([]);
const count = computed(() =>
  items.value.reduce((s, i) => s + i.qty, 0));
function add(product) { /* … */ }
provide('cart', { items, count, add });
</script>
<template>
  <Header />
  <Catalog />
</template>

<!-- CartBadge.vue -->
<script setup>
const { count } = inject('cart');
</script>
<template>
  <a href="/cart">Warenkorb ({{ count }})</a>
</template>

<!-- ProductCard.vue -->
<script setup>
const { add } = inject('cart');
</script>
<template>
  <button @click="add(product)">Hinzufügen</button>
</template>

Schritt für Schritt, in Worten

1. Der Warenkorb lebt in App. Zwei Komponenten weit unten brauchen ihn: CartBadge im Kopfbereich und ProductCard im Katalog.
2. Nur mit Props wandert der Warenkorb Ebene für Ebene nach unten. Header, Catalog und ProductList nutzen ihn nicht. Sie reichen ihn nur weiter.
3. Jemand schreibt Header um und vergisst count. Die Kette reißt in der Mitte, und der Zähler zeigt 0. Das ist Prop Drilling.
4. Stattdessen: App ruft provide('cart', …) auf. Jeder Nachkomme von App kann den Warenkorb lesen.
5. CartBadge und ProductCard lesen ihn mit inject('cart'). Die Komponenten dazwischen wissen nichts vom Warenkorb.
6. Ein Klick auf „Hinzufügen“ ruft add(product) auf. Die Funktion kommt vom Provider, deshalb passiert die Änderung in App.
7. Der Warenkorb in App ändert sich, und jede Komponente, die ihn liest, wird neu gezeichnet: Der Zähler zeigt 1, die Karte zeigt 1.
8. Die Daten haben weiterhin einen Besitzer, App. Nur der Weg hat sich geändert: nicht durch jede Ebene, sondern direkt vom Provider.

Die Komponenten in der Mitte wissen jetzt nichts mehr vom Warenkorb. Das neue Header kannst du so oft umschreiben, wie du willst.

Probier es aus

Entferne das Drilling

Der Warenkorb geht als Props durch Header und Catalog nach unten, und Header lässt count fallen. Gib den Warenkorb von oben. Header, Catalog und ProductList bekommen nichts über den Warenkorb, und CartBadge und ProductCard lesen ihn direkt. Die Prüfung legt Weißbrot, Frischmilch und noch einmal Weißbrot hinein und schaut sich die Karten und den Zähler an.

Vue

App.vueHeader.vueCartBadge.vueCatalog.vueProductList.vueProductCard.vuemoney.jsstyle.css

<script setup>
import { ref, computed } from 'vue';
import Header from './Header.vue';
import Catalog from './Catalog.vue';

const items = ref([]);
const count = computed(() => items.value.reduce((sum, i) => sum + i.qty, 0));

function add(product) {
  const found = items.value.find((i) => i.id === product.id);
  if (found) found.qty++;
  else items.value.push({ ...product, qty: 1 });
}
</script>

<template>
  <Header :count="count" />
  <main>
    <Catalog :items="items" @add="add" />
  </main>
</template>
 

<script setup> import { ref, computed } from 'vue'; import Header from './Header.vue'; import Catalog from './Catalog.vue'; const items = ref([]); const count = computed(() => items.value.reduce((sum, i) => sum + i.qty, 0)); function add(product) { const found = items.value.find((i) => i.id === product.id); if (found) found.qty++; else items.value.push({ ...product, qty: 1 }); } </script> <template> <Header :count="count" /> <main> <Catalog :items="items" @add="add" /> </main> </template>

<script setup>
import CartBadge from './CartBadge.vue';
</script>

<template>
  <header>
    <a href="/">Der Shop</a>
    <CartBadge />
  </header>
</template>
 

<script setup> import CartBadge from './CartBadge.vue'; </script> <template> <header> <a href="/">Der Shop</a> <CartBadge /> </header> </template>

<script setup>
defineProps({ count: { type: Number, default: 0 } });
</script>

<template>
  <a href="/cart">Warenkorb ({{ count }})</a>
</template>
 

<script setup> defineProps({ count: { type: Number, default: 0 } }); </script> <template> <a href="/cart">Warenkorb ({{ count }})</a> </template>

<script setup>
import ProductList from './ProductList.vue';

defineProps(['items']);
const emit = defineEmits(['add']);
</script>

<template>
  <section>
    <h1>Produkte</h1>
    <ProductList :items="items" @add="(product) => emit('add', product)" />
  </section>
</template>
 

<script setup> import ProductList from './ProductList.vue'; defineProps(['items']); const emit = defineEmits(['add']); </script> <template> <section> <h1>Produkte</h1> <ProductList :items="items" @add="(product) => emit('add', product)" /> </section> </template>

<script setup>
import ProductCard from './ProductCard.vue';

const PRODUCTS = [
  { id: 1, name: 'Weißbrot', price: 1.2 },
  { id: 5, name: 'Frischmilch', price: 1.6 },
  { id: 7, name: 'Weißkäse', price: 7.9 },
];

const props = defineProps(['items']);
const emit = defineEmits(['add']);
const qtyOf = (id) => props.items.find((i) => i.id === id)?.qty ?? 0;
</script>

<template>
  <ul>
    <ProductCard
      v-for="p in PRODUCTS"
      :key="p.id"
      :product="p"
      :qty="qtyOf(p.id)"
      @add="(product) => emit('add', product)"
    />
  </ul>
</template>
 

<script setup> import ProductCard from './ProductCard.vue'; const PRODUCTS = [ { id: 1, name: 'Weißbrot', price: 1.2 }, { id: 5, name: 'Frischmilch', price: 1.6 }, { id: 7, name: 'Weißkäse', price: 7.9 }, ]; const props = defineProps(['items']); const emit = defineEmits(['add']); const qtyOf = (id) => props.items.find((i) => i.id === id)?.qty ?? 0; </script> <template> <ul> <ProductCard v-for="p in PRODUCTS" :key="p.id" :product="p" :qty="qtyOf(p.id)" @add="(product) => emit('add', product)" /> </ul> </template>

<script setup>
import { money } from './money.js';

defineProps(['product', 'qty']);
const emit = defineEmits(['add']);
</script>

<template>
  <li>
    <span>{{ product.name }}, {{ money(product.price) }}</span>
    <span v-if="qty > 0">Im Warenkorb: {{ qty }}</span>
    <button type="button" :aria-label="`Hinzufügen ${product.name}`" @click="emit('add', product)">
      Hinzufügen
    </button>
  </li>
</template>
 

<script setup> import { money } from './money.js'; defineProps(['product', 'qty']); const emit = defineEmits(['add']); </script> <template> <li> <span>{{ product.name }}, {{ money(product.price) }}</span> <span v-if="qty > 0">Im Warenkorb: {{ qty }}</span> <button type="button" :aria-label="`Hinzufügen ${product.name}`" @click="emit('add', product)"> Hinzufügen </button> </li> </template>

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';
 

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

body { font-family: system-ui, sans-serif; margin: 0; }
header { display: flex; justify-content: space-between; background: #f3efe6; padding: 8px 16px; }
main { padding: 0 16px; }
ul { list-style: none; padding: 0; }
li { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
li span:first-child { flex: 1; }
button { font: inherit; }
 

body { font-family: system-ui, sans-serif; margin: 0; } header { display: flex; justify-content: space-between; background: #f3efe6; padding: 8px 16px; } main { padding: 0 16px; } ul { list-style: none; padding: 0; } li { display: flex; gap: 8px; align-items: center; margin: 6px 0; } li span:first-child { flex: 1; } button { font: inherit; }

Prüfen▶ Ausführen

Die Idee

Ein Store für den Warenkorb

Der Warenkorb wächst: hinzufügen, entfernen, die Anzahl ändern, leeren. Ist jede Aktion eine Funktion in App, füllt sich App mit Logik, die nicht seine Aufgabe ist. Deshalb zieht der gemeinsame Zustand in eine eigene Datei um, einen Store: die Daten und alles, was sie ändert, an einem Ort.

Für Stores nutzt Vue Pinia, die offizielle Bibliothek für gemeinsamen Zustand. Ein Store wird mit defineStore erzeugt und wie <script setup> geschrieben: Ein ref ist der Zustand, ein computed wird daraus abgeleitet, die Funktionen sind die Aktionen.

cart.js

export const useCartStore = defineStore('cart', () => {
  const items = ref([]);
  const count = computed(() => items.value.reduce((sum, i) => sum + i.qty, 0));
  function add(product) { /* … */ }
  return { items, count, add };
});

Pinia wird einmal installiert, in main.js: createApp(App).use(createPinia()).mount('#app'). Jede Komponente ruft useCartStore() auf und bekommt denselben Store. Ein provide in App ist nicht nötig.

<script setup>
import { storeToRefs } from 'pinia';
const cart = useCartStore();
const { count } = storeToRefs(cart);
</script>

Der Store ist ein reactive-Objekt: Im Template schreibst du cart.count, ohne .value. Willst du ihn in Variablen zerlegen, nimm storeToRefs(cart). Das liefert Refs, die mit dem Store verbunden bleiben. Die Aktionen (cart.add) kannst du direkt nehmen.

Vue

main.jsApp.vuecart.jsHeader.vueCartBadge.vueCatalog.vueProductList.vueProductCard.vuemoney.jsstyle.css

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

createApp(App).use(createPinia()).mount('#app');
 

import { createApp } from 'vue'; import { createPinia } from 'pinia'; import App from './App.vue'; createApp(App).use(createPinia()).mount('#app');

<script setup>
import Header from './Header.vue';
import Catalog from './Catalog.vue';
</script>

<template>
  <Header />
  <main>
    <Catalog />
  </main>
</template>
 

<script setup> import Header from './Header.vue'; import Catalog from './Catalog.vue'; </script> <template> <Header /> <main> <Catalog /> </main> </template>

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

export const useCartStore = defineStore('cart', () => {
  const items = ref([]);
  const count = computed(() => items.value.reduce((sum, i) => sum + i.qty, 0));

  function add(product) {
    const found = items.value.find((i) => i.id === product.id);
    if (found) found.qty++;
    else items.value.push({ ...product, qty: 1 });
  }

  return { items, count, add };
});
 

import { defineStore } from 'pinia'; import { ref, computed } from 'vue'; export const useCartStore = defineStore('cart', () => { const items = ref([]); const count = computed(() => items.value.reduce((sum, i) => sum + i.qty, 0)); function add(product) { const found = items.value.find((i) => i.id === product.id); if (found) found.qty++; else items.value.push({ ...product, qty: 1 }); } return { items, count, add }; });

<script setup>
import CartBadge from './CartBadge.vue';
</script>

<template>
  <header>
    <a href="/">Der Shop</a>
    <CartBadge />
  </header>
</template>
 

<script setup> import CartBadge from './CartBadge.vue'; </script> <template> <header> <a href="/">Der Shop</a> <CartBadge /> </header> </template>

<script setup>
import { storeToRefs } from 'pinia';
import { useCartStore } from './cart.js';

const { count } = storeToRefs(useCartStore());
</script>

<template>
  <a href="/cart">Warenkorb ({{ count }})</a>
</template>
 

<script setup> import { storeToRefs } from 'pinia'; import { useCartStore } from './cart.js'; const { count } = storeToRefs(useCartStore()); </script> <template> <a href="/cart">Warenkorb ({{ count }})</a> </template>

<script setup>
import ProductList from './ProductList.vue';
</script>

<template>
  <section>
    <h1>Produkte</h1>
    <ProductList />
  </section>
</template>
 

<script setup> import ProductList from './ProductList.vue'; </script> <template> <section> <h1>Produkte</h1> <ProductList /> </section> </template>

<script setup>
import ProductCard from './ProductCard.vue';

const PRODUCTS = [
  { id: 1, name: 'Weißbrot', price: 1.2 },
  { id: 5, name: 'Frischmilch', price: 1.6 },
  { id: 7, name: 'Weißkäse', price: 7.9 },
];
</script>

<template>
  <ul>
    <ProductCard v-for="p in PRODUCTS" :key="p.id" :product="p" />
  </ul>
</template>
 

<script setup> import ProductCard from './ProductCard.vue'; const PRODUCTS = [ { id: 1, name: 'Weißbrot', price: 1.2 }, { id: 5, name: 'Frischmilch', price: 1.6 }, { id: 7, name: 'Weißkäse', price: 7.9 }, ]; </script> <template> <ul> <ProductCard v-for="p in PRODUCTS" :key="p.id" :product="p" /> </ul> </template>

<script setup>
import { computed } from 'vue';
import { useCartStore } from './cart.js';
import { money } from './money.js';

const props = defineProps(['product']);
const cart = useCartStore();
const qty = computed(() => cart.items.find((i) => i.id === props.product.id)?.qty ?? 0);
</script>

<template>
  <li>
    <span>{{ product.name }}, {{ money(product.price) }}</span>
    <span v-if="qty > 0">Im Warenkorb: {{ qty }}</span>
    <button type="button" :aria-label="`Hinzufügen ${product.name}`" @click="cart.add(product)">
      Hinzufügen
    </button>
  </li>
</template>
 

<script setup> import { computed } from 'vue'; import { useCartStore } from './cart.js'; import { money } from './money.js'; const props = defineProps(['product']); const cart = useCartStore(); const qty = computed(() => cart.items.find((i) => i.id === props.product.id)?.qty ?? 0); </script> <template> <li> <span>{{ product.name }}, {{ money(product.price) }}</span> <span v-if="qty > 0">Im Warenkorb: {{ qty }}</span> <button type="button" :aria-label="`Hinzufügen ${product.name}`" @click="cart.add(product)"> Hinzufügen </button> </li> </template>

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';
 

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

body { font-family: system-ui, sans-serif; margin: 0; }
header { display: flex; justify-content: space-between; background: #f3efe6; padding: 8px 16px; }
main { padding: 0 16px; }
ul { list-style: none; padding: 0; }
li { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
li span:first-child { flex: 1; }
button { font: inherit; }
 

body { font-family: system-ui, sans-serif; margin: 0; } header { display: flex; justify-content: space-between; background: #f3efe6; padding: 8px 16px; } main { padding: 0 16px; } ul { list-style: none; padding: 0; } li { display: flex; gap: 8px; align-items: center; margin: 6px 0; } li span:first-child { flex: 1; } button { font: inherit; }

▶ AusführenCode zurücksetzen

Öffne cart.js: Dort steht die ganze Logik des Warenkorbs. App.vue hat keinen Zustand mehr, und main.js installiert Pinia.

Probier es aus

Finde den Fehler

Die Karten zählen, und der Zähler bleibt bei „Warenkorb (0)“. In der Konsole steht kein Fehler. Welche Zeile ist schuld?

Wähle die Zeile mit dem Fehler.

1<script setup>2import { useCartStore } from './cart.js';34const { count } = useCartStore();5</script>67<template>8 <a href="/cart">Warenkorb ({{ count }})</a>9</template>

Prüfen

Die Idee

Wann geteilt und wann nicht

Gemeinsamer Zustand ist praktisch, und deshalb ist es verlockend, alles dorthin zu legen. Aber alles darin kann von überall gelesen und geändert werden, und das macht Fehler schwerer auffindbar. Die Regel aus der Lektion über das Hochreichen gilt: so hoch wie nötig, und nicht höher.

• Geteilt: was entfernte Teile des Baums brauchen und was lebt, solange der Nutzer auf der Seite ist. Der Warenkorb, der angemeldete Nutzer, die Sprache, das Design.
• In der Komponente: die Felder eines Formulars, ob das Menü offen ist, welcher Tab gewählt ist, der Text im Suchfeld. Eine Komponente (oder ihr Elternteil) braucht sie, und sie verschwinden mit ihr.
• Die Daten des Servers sind kein gemeinsamer Zustand. Die Produktliste und die Bestellungen haben einen Besitzer, und der Besitzer ist der Server. In einem Store sind sie eine Kopie, die aufgefrischt werden muss. Die Komponente, die sie zeigt, lädt sie, wie in der Lektion über Daten aus einer API.

Gemeinsamer Zustand ändert die Richtung nicht: Die Daten gehen von einem Besitzer aus, und die Änderungen laufen über seine Funktionen.

Probier es aus

Ergänze die Lücke

Wie nimmt CartBadge count aus dem Store, damit es mit ihm verbunden bleibt?

<script setup>
import { storeToRefs } from 'pinia';
import { useCartStore } from './cart.js';

const { count } = (useCartStore());
</script>

Prüfen

Genauer, für Neugierige

Ein Store mit Optionen. defineStore nimmt auch ein Objekt: state: () => ({ items: [] }), getters und actions. Das ist dasselbe, geschrieben als Options API. Pinia unterstützt beide Arten.

provide/inject oder Pinia. provide ist eingebaut und eignet sich für Dinge, die ein Teilbaum braucht (die Einstellungen einer Tabelle, ein Formular mit verschachtelten Feldern). Pinia ist für den Zustand der ganzen Anwendung: Es ist in den Vue DevTools sichtbar, lässt sich für sich testen und hängt nicht davon ab, welche Komponente oben steht.

Ein Symbol als Schlüssel. Statt des Strings 'cart' nimmt provide oft ein Symbol(), das aus einer gemeinsamen Datei exportiert wird. Dann können zwei verschiedene Provider nicht aus Versehen denselben Schlüssel haben.

inject mit Standardwert. inject('cart', null) schreibt keine Warnung, wenn niemand den Schlüssel bereitgestellt hat, und liefert null.

Der Store lebt, solange die Seite offen ist. Beim Neuladen ist er weg. Ein Warenkorb, der überleben soll, wird in localStorage oder auf dem Server gespeichert.

Die Prüfungen sehen das Verhalten. Die Aufgaben hier sehen nicht, ob der Warenkorb aus Props, aus einem Context oder aus einem Store kommt. Sie prüfen, dass der Zähler und die Karten dasselbe zeigen.

Übung

Die Warenkorbseite

Im Hauptteil steht CartSummary: eine Überschrift Der Warenkorb, Zeilen Weißbrot × 2 mit einem Button Entfernen, Gesamt: 4,00 €, und Der Warenkorb ist leer, wenn er leer ist. Jetzt hat es einen eigenen Warenkorb, den niemand füllt. Füge dem Store das Entfernen und eine Summe hinzu und lass CartSummary den Warenkorb von dort lesen. Die Prüfung legt drei Produkte hinein, entfernt sie und schaut sich den Zähler, die Karten und die Summe an.

Vue

main.jsApp.vuecart.jsHeader.vueCartBadge.vueCatalog.vueProductList.vueProductCard.vueCartSummary.vuemoney.jsstyle.css

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

createApp(App).use(createPinia()).mount('#app');
 

import { createApp } from 'vue'; import { createPinia } from 'pinia'; import App from './App.vue'; createApp(App).use(createPinia()).mount('#app');

<script setup>
import Header from './Header.vue';
import Catalog from './Catalog.vue';
import CartSummary from './CartSummary.vue';
</script>

<template>
  <Header />
  <main>
    <Catalog />
    <CartSummary />
  </main>
</template>
 

<script setup> import Header from './Header.vue'; import Catalog from './Catalog.vue'; import CartSummary from './CartSummary.vue'; </script> <template> <Header /> <main> <Catalog /> <CartSummary /> </main> </template>

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

export const useCartStore = defineStore('cart', () => {
  const items = ref([]);
  const count = computed(() => items.value.reduce((sum, i) => sum + i.qty, 0));

  function add(product) {
    const found = items.value.find((i) => i.id === product.id);
    if (found) found.qty++;
    else items.value.push({ ...product, qty: 1 });
  }

  return { items, count, add };
});
 

import { defineStore } from 'pinia'; import { ref, computed } from 'vue'; export const useCartStore = defineStore('cart', () => { const items = ref([]); const count = computed(() => items.value.reduce((sum, i) => sum + i.qty, 0)); function add(product) { const found = items.value.find((i) => i.id === product.id); if (found) found.qty++; else items.value.push({ ...product, qty: 1 }); } return { items, count, add }; });

<script setup>
import CartBadge from './CartBadge.vue';
</script>

<template>
  <header>
    <a href="/">Der Shop</a>
    <CartBadge />
  </header>
</template>
 

<script setup> import CartBadge from './CartBadge.vue'; </script> <template> <header> <a href="/">Der Shop</a> <CartBadge /> </header> </template>

<script setup>
import { storeToRefs } from 'pinia';
import { useCartStore } from './cart.js';

const { count } = storeToRefs(useCartStore());
</script>

<template>
  <a href="/cart">Warenkorb ({{ count }})</a>
</template>
 

<script setup> import { storeToRefs } from 'pinia'; import { useCartStore } from './cart.js'; const { count } = storeToRefs(useCartStore()); </script> <template> <a href="/cart">Warenkorb ({{ count }})</a> </template>

<script setup>
import ProductList from './ProductList.vue';
</script>

<template>
  <section>
    <h1>Produkte</h1>
    <ProductList />
  </section>
</template>
 

<script setup> import ProductList from './ProductList.vue'; </script> <template> <section> <h1>Produkte</h1> <ProductList /> </section> </template>

<script setup>
import ProductCard from './ProductCard.vue';

const PRODUCTS = [
  { id: 1, name: 'Weißbrot', price: 1.2 },
  { id: 5, name: 'Frischmilch', price: 1.6 },
  { id: 7, name: 'Weißkäse', price: 7.9 },
];
</script>

<template>
  <ul>
    <ProductCard v-for="p in PRODUCTS" :key="p.id" :product="p" />
  </ul>
</template>
 

<script setup> import ProductCard from './ProductCard.vue'; const PRODUCTS = [ { id: 1, name: 'Weißbrot', price: 1.2 }, { id: 5, name: 'Frischmilch', price: 1.6 }, { id: 7, name: 'Weißkäse', price: 7.9 }, ]; </script> <template> <ul> <ProductCard v-for="p in PRODUCTS" :key="p.id" :product="p" /> </ul> </template>

<script setup>
import { computed } from 'vue';
import { useCartStore } from './cart.js';
import { money } from './money.js';

const props = defineProps(['product']);
const cart = useCartStore();
const qty = computed(() => cart.items.find((i) => i.id === props.product.id)?.qty ?? 0);
</script>

<template>
  <li>
    <span>{{ product.name }}, {{ money(product.price) }}</span>
    <span v-if="qty > 0">Im Warenkorb: {{ qty }}</span>
    <button type="button" :aria-label="`Hinzufügen ${product.name}`" @click="cart.add(product)">
      Hinzufügen
    </button>
  </li>
</template>
 

<script setup> import { computed } from 'vue'; import { useCartStore } from './cart.js'; import { money } from './money.js'; const props = defineProps(['product']); const cart = useCartStore(); const qty = computed(() => cart.items.find((i) => i.id === props.product.id)?.qty ?? 0); </script> <template> <li> <span>{{ product.name }}, {{ money(product.price) }}</span> <span v-if="qty > 0">Im Warenkorb: {{ qty }}</span> <button type="button" :aria-label="`Hinzufügen ${product.name}`" @click="cart.add(product)"> Hinzufügen </button> </li> </template>

<script setup>
import { ref, computed } from 'vue';
import { money } from './money.js';

const items = ref([]);
const total = computed(() => items.value.reduce((sum, i) => sum + i.price * i.qty, 0));

function remove(id) {
  items.value = items.value.filter((i) => i.id !== id);
}
</script>

<template>
  <section aria-labelledby="cart-title">
    <h2 id="cart-title">Der Warenkorb</h2>
    <p v-if="items.length === 0">Der Warenkorb ist leer</p>
    <ul>
      <li v-for="item in items" :key="item.id">
        <span>{{ item.name }} × {{ item.qty }}</span>
        <button type="button" :aria-label="`Entfernen ${item.name}`" @click="remove(item.id)">
          Entfernen
        </button>
      </li>
    </ul>
    <p>Gesamt: {{ money(total) }}</p>
  </section>
</template>
 

<script setup> import { ref, computed } from 'vue'; import { money } from './money.js'; const items = ref([]); const total = computed(() => items.value.reduce((sum, i) => sum + i.price * i.qty, 0)); function remove(id) { items.value = items.value.filter((i) => i.id !== id); } </script> <template> <section aria-labelledby="cart-title"> <h2 id="cart-title">Der Warenkorb</h2> <p v-if="items.length === 0">Der Warenkorb ist leer</p> <ul> <li v-for="item in items" :key="item.id"> <span>{{ item.name }} × {{ item.qty }}</span> <button type="button" :aria-label="`Entfernen ${item.name}`" @click="remove(item.id)"> Entfernen </button> </li> </ul> <p>Gesamt: {{ money(total) }}</p> </section> </template>

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';
 

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

body { font-family: system-ui, sans-serif; margin: 0; }
header { display: flex; justify-content: space-between; background: #f3efe6; padding: 8px 16px; }
main { padding: 0 16px; }
ul { list-style: none; padding: 0; }
li { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
li span:first-child { flex: 1; }
button { font: inherit; }
 

body { font-family: system-ui, sans-serif; margin: 0; } header { display: flex; justify-content: space-between; background: #f3efe6; padding: 8px 16px; } main { padding: 0 16px; } ul { list-style: none; padding: 0; } li { display: flex; gap: 8px; align-items: center; margin: 6px 0; } li span:first-child { flex: 1; } button { font: inherit; }

Prüfen▶ Ausführen

Test

Teste dich

1. Der Warenkorb geht von App über Catalog und ProductList bis zu ProductCard nach unten. Catalog und ProductList nutzen ihn nicht. Was ist das Problem?

Nichts: So macht man das immerProps sind ab zwei Ebenen langsamJede Komponente auf dem Weg muss vom Warenkorb wissen, und eine vergessene Prop reißt die Kette

2. CartBadge sagt const { count } = useCartStore();. Was zeigt der Zähler?

Immer die aktuelle AnzahlDen Wert im Moment der Erzeugung, und danach ändert er sich nichtEinen Fehler in der Konsole

3. ProductCard ruft inject('cart') auf, und niemand über ihm hat provide('cart', …) aufgerufen. Was passiert?

inject wartet, bis jemand ihn bereitstelltVue erzeugt einen leeren Warenkorbinject liefert undefined, und die Konsole meldet injection "cart" not found

4. Was davon gehört in den gemeinsamen Zustand?

Der Text im Feld „Suche“Ob das Menü auf dem Handy offen istDer Warenkorb: Der Zähler, die Karten und die Warenkorbseite brauchen ihn

5. Die Produktliste kommt von /api/products. Soll sie in den gemeinsamen Store?

Ja, sonst funktioniert fetch nichtBesser nicht: Sie ist eine Kopie der Daten des Servers; die Komponente, die sie zeigt, lädt sieJa: Alles, was von einer API kommt, ist gemeinsamer Zustand

Prüfen

Lektion von vorn beginnen

Verwandte Lektionen

• Baut auf: Abgeleiteter Zustand · Gemeinsamer Zustand: nach oben · Daten von einer API in einer Komponente · Formulare in einer Komponente
• Geht weiter in: Routing · Von der Sandbox zum Projekt · Das Schaufenster des Shops
• Aufgaben zum Thema: Effekte, Daten und Formulare