Verwalten des freigegebenen Zustands in Vue 3

Staat kann hart sein. Wenn wir ein einfaches Vue-Projekt starten, kann es einfach sein, unseren Arbeitsstatus auf einer bestimmten Komponente beizubehalten:

 setup() { let books: Work[] = reactive([]); onMounted(async () => { // Call the API const response = await bookService.getScienceBooks(); if (response.status === 200) { books.splice(0, books.length, ...response.data.works); } }); return { books }; },

Wenn es sich bei Ihrem Projekt um eine einzelne Seite mit Daten handelt (vielleicht um sie zu sortieren oder zu filtern), kann dies überzeugend sein. Aber in diesem Fall erhält diese Komponente bei jeder Anfrage Daten. Was ist, wenn Sie es in der Nähe behalten möchten? Hier kommt die staatliche Verwaltung ins Spiel. Da Netzwerkverbindungen oft teuer und gelegentlich unzuverlässig sind, wäre es besser, diesen Zustand beizubehalten, während Sie durch eine Anwendung navigieren.

Ein weiteres Problem ist die Kommunikation zwischen Komponenten. Während Sie Ereignisse und Requisiten verwenden können, um mit direkten untergeordneten Eltern zu kommunizieren, kann der Umgang mit einfachen Situationen wie Fehlerbehandlung und Besetzt-Flags schwierig sein, wenn jede Ihrer Ansichten/Seiten unabhängig ist. Stellen Sie sich zum Beispiel vor, Sie hätten ein Steuerelement der obersten Ebene, das so verkabelt war, dass Fehler- und Ladeanimationen angezeigt wurden:

 // App.vue <template> <div class="container mx-auto bg-gray-100 p-1"> <router-link to="/"><h1>Bookcase</h1></router-link> <div class="alert" v-if="error">{{ error }}</div> <div class="alert bg-gray-200 text-gray-900" v-if="isBusy"> Loading... </div> <router-view :key="$route.fullPath"></router-view> </div> </template>

Ohne eine effektive Möglichkeit, diesen Zustand zu handhaben, könnte es ein Publish/Subscribe-System vorschlagen, aber tatsächlich ist die gemeinsame Nutzung von Daten in vielen Fällen einfacher. Wenn Sie einen gemeinsamen Zustand haben möchten, wie gehen Sie vor? Schauen wir uns einige gängige Methoden an, um dies zu tun.

Hinweis : Sie finden den Code für diesen Abschnitt im „main“-Zweig des Beispielprojekts auf GitHub.

Gemeinsamer Zustand in Vue 3

Seit dem Wechsel zu Vue 3 bin ich vollständig auf die Verwendung der Kompositions-API umgestiegen. Für den Artikel verwende ich auch TypeScript, obwohl dies für die Beispiele, die ich Ihnen zeige, nicht erforderlich ist. Während Sie den Zustand beliebig teilen können, werde ich Ihnen einige Techniken zeigen, die meiner Meinung nach die am häufigsten verwendeten Muster sind. Jeder hat seine eigenen Vor- und Nachteile, also nehmen Sie nichts, worüber ich hier spreche, als Dogma.

Zu den Techniken gehören:

• Fabriken,
• Geteilte Singletons,
• Vuex 4,
• Vex 5.

Hinweis : Vuex 5 befindet sich zum Zeitpunkt des Schreibens dieses Artikels in der RFC-Phase (Request for Comments), also möchte ich Sie darauf vorbereiten, wohin Vuex geht, aber im Moment gibt es keine funktionierende Version dieser Option.

Lassen Sie uns graben…

Fabriken

Hinweis : Der Code für diesen Abschnitt befindet sich im „Factories“-Zweig des Beispielprojekts auf GitHub.

Beim Fabrikmuster geht es nur darum, eine Instanz des Zustands zu erstellen, der Ihnen wichtig ist. In diesem Muster geben Sie eine Funktion zurück, die der Startfunktion in der Kompositions-API sehr ähnlich ist. Sie würden einen Bereich erstellen und die Komponenten dessen erstellen, wonach Sie suchen. Zum Beispiel:

 export default function () { const books: Work[] = reactive([]); async function loadBooks(val: string) { const response = await bookService.getBooks(val, currentPage.value); if (response.status === 200) { books.splice(0, books.length, ...response.data.works); } } return { loadBooks, books }; }

Sie könnten nur die Teile der werkseitig erstellten Objekte anfordern, die Sie wie folgt benötigen:

 // In Home.vue const { books, loadBooks } = BookFactory();

Wenn wir ein isBusy -Flag hinzufügen, um anzuzeigen, wann die Netzwerkanfrage erfolgt, ändert sich der obige Code nicht, aber Sie können entscheiden, wo Sie isBusy :

 export default function () { const books: Work[] = reactive([]); const isBusy = ref(false); async function loadBooks(val: string) { isBusy.value = true; const response = await bookService.getBooks(val, currentPage.value); if (response.status === 200) { books.splice(0, books.length, ...response.data.works); } } return { loadBooks, books, isBusy }; }

In einer anderen Ansicht (vue?) könnten Sie einfach nach dem isBusy-Flag fragen, ohne wissen zu müssen, wie der Rest der Factory funktioniert:

 // App.vue export default defineComponent({ setup() { const { isBusy } = BookFactory(); return { isBusy } }, })

Aber Sie haben vielleicht ein Problem bemerkt; Jedes Mal, wenn wir die Factory aufrufen, erhalten wir eine neue Instanz aller Objekte. Es gibt Zeiten, in denen Sie möchten, dass eine Fabrik neue Instanzen zurückgibt, aber in unserem Fall sprechen wir über die gemeinsame Nutzung des Zustands, also müssen wir die Erstellung aus der Fabrik verschieben:

 const books: Work[] = reactive([]); const isBusy = ref(false); async function loadBooks(val: string) { isBusy.value = true; const response = await bookService.getBooks(val, currentPage.value); if (response.status === 200) { books.splice(0, books.length, ...response.data.works); } } export default function () { return { loadBooks, books, isBusy }; }

Jetzt gibt uns die Fabrik eine gemeinsam genutzte Instanz oder ein Singleton, wenn Sie es vorziehen. Obwohl dieses Muster funktioniert, kann es verwirrend sein, eine Funktion zurückzugeben, die nicht jedes Mal eine neue Instanz erstellt.

Da die zugrunde liegenden Objekte als const gekennzeichnet sind, sollten Sie sie nicht ersetzen können (und die Singleton-Natur brechen). Dieser Code sollte sich also beschweren:

 // In Home.vue const { books, loadBooks } = BookFactory(); books = []; // Error, books is defined as const

Daher kann es wichtig sein, sicherzustellen, dass der veränderliche Status aktualisiert werden kann (z. B. durch die Verwendung von books.splice() anstelle der Zuweisung der Bücher).

Eine andere Möglichkeit, dies zu handhaben, ist die Verwendung von gemeinsam genutzten Instanzen.

Geteilte Instanzen

Der Code für diesen Abschnitt befindet sich im „SharedState“-Zweig des Beispielprojekts auf GitHub.

Wenn Sie den Zustand teilen, sollten Sie sich auch darüber im Klaren sein, dass der Zustand ein Singleton ist. In diesem Fall kann es einfach als statisches Objekt importiert werden. Zum Beispiel erstelle ich gerne ein Objekt, das als reaktives Objekt importiert werden kann:

 export default reactive({ books: new Array<Work>(), isBusy: false, async loadBooks() { this.isBusy = true; const response = await bookService.getBooks(this.currentTopic, this.currentPage); if (response.status === 200) { this.books.splice(0, this.books.length, ...response.data.works); } this.isBusy = false; } });

In diesem Fall importieren Sie einfach das Objekt (das ich in diesem Beispiel als Store bezeichne):

 // Home.vue import state from "@/state"; export default defineComponent({ setup() { // ... onMounted(async () => { if (state.books.length === 0) state.loadBooks(); }); return { state, bookTopics, }; }, });

Dann wird es einfach, an den Zustand zu binden:

 <!-- Home.vue --> <div class="grid grid-cols-4"> <div v-for="book in state.books" :key="book.key" class="border bg-white border-grey-500 m-1 p-1" > <router-link :to="{ name: 'book', params: { id: book.key } }"> <BookInfo :book="book" /> </router-link> </div>

Wie bei den anderen Mustern haben Sie den Vorteil, dass Sie diese Instanz zwischen Ansichten teilen können:

 // App.vue import state from "@/state"; export default defineComponent({ setup() { return { state }; }, })

Dann kann dies an dasselbe Objekt gebunden werden (ob es sich um ein übergeordnetes Element von Home.vue oder einer anderen Seite im Router handelt):

 <!-- App.vue --> <div class="container mx-auto bg-gray-100 p-1"> <router-link to="/"><h1>Bookcase</h1></router-link> <div class="alert bg-gray-200 text-gray-900" v-if="state.isBusy">Loading...</div> <router-view :key="$route.fullPath"></router-view> </div>

Unabhängig davon, ob Sie das Fabrikmuster oder die gemeinsam genutzte Instanz verwenden, haben beide ein gemeinsames Problem: den änderbaren Zustand. Sie können versehentliche Nebeneffekte von Bindungen oder Codeänderungsstatus haben, wenn Sie dies nicht möchten. In einem trivialen Beispiel, wie ich es hier verwende, ist es nicht komplex genug, um sich darüber Gedanken zu machen. Aber wenn Sie immer größere Apps erstellen, sollten Sie sorgfältiger über Zustandsmutationen nachdenken. Hier kann Vuex zur Rettung kommen.

Vex 4

Der Code für diesen Abschnitt befindet sich im „Vuex4“-Zweig des Beispielprojekts auf GitHub.

Vuex ist State Manager für Vue. Es wurde vom Kernteam gebaut, obwohl es als separates Projekt verwaltet wird. Der Zweck von Vuex besteht darin, den Status von den Aktionen zu trennen, die Sie mit dem Status ausführen möchten. Alle Statusänderungen müssen Vuex durchlaufen, was bedeutet, dass es komplexer ist, aber Sie erhalten Schutz vor versehentlichen Statusänderungen.

Die Idee von Vuex ist es, einen vorhersehbaren Fluss der Zustandsverwaltung bereitzustellen. Ansichten fließen zu Aktionen, die wiederum Mutationen verwenden, um den Status zu ändern, was wiederum die Ansicht aktualisiert. Indem Sie den Fluss der Zustandsänderung begrenzen, sollten Sie weniger Nebeneffekte haben, die den Zustand Ihrer Anwendungen ändern; Daher ist es einfacher, größere Anwendungen zu erstellen. Vuex hat eine Lernkurve, aber mit dieser Komplexität erhalten Sie Vorhersehbarkeit.

Darüber hinaus unterstützt Vuex Entwicklungszeit-Tools (über die Vue Tools), um mit der Zustandsverwaltung zu arbeiten, einschließlich einer Funktion namens Zeitreise. Auf diese Weise können Sie einen Verlauf des Status anzeigen und vor- und zurückgehen, um zu sehen, wie er sich auf die Anwendung auswirkt.

Es gibt auch Zeiten, in denen Vuex wichtig ist.

Um es zu Ihrem Vue 3-Projekt hinzuzufügen, können Sie das Paket entweder zum Projekt hinzufügen:

 > npm i vuex

Alternativ können Sie es auch über die Vue-CLI hinzufügen:

 > vue add vuex

Durch die Verwendung der CLI wird ein Ausgangspunkt für Ihren Vuex-Speicher erstellt, andernfalls müssen Sie ihn manuell mit dem Projekt verbinden. Lassen Sie uns durchgehen, wie das funktioniert.

Zunächst benötigen Sie ein Zustandsobjekt, das mit der createStore-Funktion von Vuex erstellt wird:

 import { createStore } from 'vuex' export default createStore({ state: {}, mutations: {}, actions: {}, getters: {} });

Wie Sie sehen können, müssen für das Geschäft mehrere Eigenschaften definiert werden. Status ist nur eine Liste der Daten, auf die Sie Ihrer Anwendung Zugriff gewähren möchten:

 import { createStore } from 'vuex' export default createStore({ state: { books: [], isBusy: false }, mutations: {}, actions: {} });

Beachten Sie, dass der Zustand keine ref- oder reaktiven Wrapper verwenden sollte. Diese Daten sind die gleiche Art von Share-Daten, die wir mit Shared Instances oder Factories verwendet haben. Dieser Speicher wird ein Singleton in Ihrer Anwendung sein, daher werden auch die Daten im Status geteilt.

Schauen wir uns als Nächstes die Aktionen an. Aktionen sind Vorgänge, die Sie aktivieren möchten und die den Status betreffen. Zum Beispiel:

 actions: { async loadBooks(store) { const response = await bookService.getBooks(store.state.currentTopic, if (response.status === 200) { // ... } } },

Aktionen werden an eine Instanz des Speichers übergeben, sodass Sie den Status und andere Operationen abrufen können. Normalerweise würden wir nur die Teile destrukturieren, die wir brauchen:

 actions: { async loadBooks({ state }) { const response = await bookService.getBooks(state.currentTopic, if (response.status === 200) { // ... } } },

Das letzte Stück davon sind Mutationen. Mutationen sind Funktionen, die den Zustand verändern können. Nur Mutationen können den Zustand beeinflussen. Für dieses Beispiel brauchen wir also Mutationen, die den Zustand ändern:

 mutations: { setBusy: (state) => state.isBusy = true, clearBusy: (state) => state.isBusy = false, setBooks(state, books) { state.books.splice(0, state.books.length, ...books); } },

Mutationsfunktionen übergeben immer das Zustandsobjekt, sodass Sie diesen Zustand mutieren können. In den ersten beiden Beispielen können Sie sehen, dass wir den Status explizit festlegen. Aber im dritten Beispiel übergeben wir den Zustand an set. Mutationen nehmen immer zwei Parameter: Zustand und das Argument beim Aufruf der Mutation.

Um eine Mutation aufzurufen, verwenden Sie die Commit -Funktion im Store. In unserem Fall füge ich es einfach der Destrukturierung hinzu:

 actions: { async loadBooks({ state, commit }) { commit("setBusy"); const response = await bookService.getBooks(state.currentTopic, if (response.status === 200) { commit("setBooks", response.data); } commit("clearBusy"); } },

Was Sie hier sehen werden, ist, wie Commit den Namen der Aktion erfordert. Es gibt Tricks, damit dies nicht nur magische Saiten verwendet, aber ich werde das vorerst überspringen. Diese Verwendung von magischen Zeichenfolgen ist eine der Einschränkungen bei der Verwendung von Vuex.

Während die Verwendung von Commit wie ein unnötiger Wrapper erscheinen mag, denken Sie daran, dass Vuex Sie nur innerhalb der Mutation mutieren lässt, daher werden nur Aufrufe durch Commit ausgeführt.

Sie können auch sehen, dass der Aufruf von setBooks ein zweites Argument akzeptiert. Dies ist das zweite Argument, das die Mutation aufruft. Wenn Sie weitere Informationen benötigen, müssen Sie diese in ein einziges Argument packen (aktuell eine weitere Einschränkung von Vuex). Angenommen, Sie müssten ein Buch in die Bücherliste einfügen, könnten Sie es so nennen:

 commit("insertBook", { book, place: 4 }); // object, tuple, etc.

Dann könnten Sie einfach in die Stücke zerlegen, die Sie brauchen:

 mutations: { insertBook(state, { book, place }) => // ... }

Ist das elegant? Nicht wirklich, aber es funktioniert.

Jetzt, da unsere Aktion mit Mutationen arbeitet, müssen wir in der Lage sein, den Vuex-Speicher in unserem Code zu verwenden. Es gibt eigentlich zwei Möglichkeiten, in den Laden zu kommen. Erstens, indem Sie den Store bei der Anwendung (z. B. main.ts/js) registrieren, haben Sie Zugriff auf einen zentralen Store, auf den Sie überall in Ihrer Anwendung zugreifen können:

 // main.ts import store from './store' createApp(App) .use(store) .use(router) .mount('#app')

Beachten Sie, dass dies nicht Vuex hinzufügt, sondern Ihren eigentlichen Shop, den Sie erstellen. Sobald dies hinzugefügt ist, können Sie einfach useStore , um das Store-Objekt abzurufen:

 import { useStore } from "vuex"; export default defineComponent({ components: { BookInfo, }, setup() { const store = useStore(); const books = computed(() => store.state.books); // ...

Das funktioniert gut, aber ich bevorzuge es, den Store einfach direkt zu importieren:

 import store from "@/store"; export default defineComponent({ components: { BookInfo, }, setup() { const books = computed(() => store.state.books); // ...

Nun, da Sie Zugriff auf das Store-Objekt haben, wie verwenden Sie es? Für den Zustand müssen Sie sie mit berechneten Funktionen umschließen, damit Änderungen an Ihre Bindungen weitergegeben werden:

 export default defineComponent({ setup() { const books = computed(() => store.state.books); return { books }; }, });

Um Aktionen aufzurufen, müssen Sie die Dispatch -Methode aufrufen:

 export default defineComponent({ setup() { const books = computed(() => store.state.books); onMounted(async () => await store.dispatch("loadBooks")); return { books }; }, });

Aktionen können Parameter haben, die Sie nach dem Namen der Methode hinzufügen. Um den Status zu ändern, müssen Sie schließlich commit aufrufen, genau wie wir es in den Aktionen getan haben. Zum Beispiel habe ich eine Paging-Eigenschaft im Store, und dann kann ich den Status mit commit ändern:

 const incrementPage = () => store.commit("setPage", store.state.currentPage + 1); const decrementPage = () => store.commit("setPage", store.state.currentPage - 1);

Beachten Sie, dass ein solcher Aufruf einen Fehler auslösen würde (weil Sie den Status nicht manuell ändern können):

 const incrementPage = () => store.state.currentPage++; const decrementPage = () => store.state.currentPage--;

Dies ist die eigentliche Stärke hier, wir möchten die Kontrolle darüber haben, wo der Zustand geändert wird, und keine Nebenwirkungen haben, die später in der Entwicklung zu Fehlern führen.

Möglicherweise sind Sie mit der Anzahl der beweglichen Teile in Vuex überfordert, aber es kann wirklich helfen, den Status in größeren, komplexeren Projekten zu verwalten. Ich würde nicht sagen, dass Sie es in jedem Fall brauchen, aber es wird große Projekte geben, bei denen es Ihnen insgesamt hilft.

Das große Problem mit Vuex 4 ist, dass die Arbeit damit in einem TypeScript-Projekt zu wünschen übrig lässt. Sie können sicherlich TypeScript-Typen erstellen, um die Entwicklung und Erstellung zu unterstützen, aber es erfordert viele bewegliche Teile.

An dieser Stelle soll Vuex 5 die Funktionsweise von Vuex in TypeScript (und in JavaScript-Projekten im Allgemeinen) vereinfachen. Mal sehen, wie das funktioniert, wenn es das nächste Mal veröffentlicht wird.

Vex 5

Hinweis : Der Code für diesen Abschnitt befindet sich im „Vuex5“-Zweig des Beispielprojekts auf GitHub.

Zum Zeitpunkt dieses Artikels ist Vuex 5 nicht real. Es ist ein RFC (Request for Comments). Es ist ein Plan. Es ist ein Ausgangspunkt für Diskussionen. Vieles von dem, was ich hier erklären kann, wird sich wahrscheinlich etwas ändern. Aber um Sie auf die Änderung in Vuex vorzubereiten, wollte ich Ihnen einen Ausblick darauf geben, wohin es geht. Aus diesem Grund wird der diesem Beispiel zugeordnete Code nicht erstellt.

Die grundlegenden Konzepte, wie Vuex funktioniert, sind seit seiner Einführung etwas unverändert geblieben. Mit der Einführung von Vue 3 wurde Vuex 4 geschaffen, um Vuex hauptsächlich die Arbeit in neuen Projekten zu ermöglichen. Aber das Team versucht, die wahren Schmerzpunkte mit Vuex zu untersuchen und zu lösen. Zu diesem Zweck planen sie einige wichtige Änderungen:

• Keine Mutationen mehr: Aktionen können den Staat (und möglicherweise jeden) mutieren.
• Bessere TypeScript-Unterstützung.
• Bessere Multi-Store-Funktionalität.

Wie würde das funktionieren? Beginnen wir mit der Erstellung des Shops:

 export default createStore({ key: 'bookStore', state: () => ({ isBusy: false, books: new Array<Work>() }), actions: { async loadBooks() { try { this.isBusy = true; const response = await bookService.getBooks(); if (response.status === 200) { this.books = response.data.works; } } finally { this.isBusy = false; } } }, getters: { findBook(key: string): Work | undefined { return this.books.find(b => b.key === key); } } });

Die erste Änderung, die zu sehen ist, ist, dass jeder Laden jetzt einen eigenen Schlüssel benötigt. Auf diese Weise können Sie mehrere Geschäfte abrufen. Als nächstes werden Sie feststellen, dass das Zustandsobjekt jetzt eine Fabrik ist (z. B. Rückgaben von einer Funktion, die nicht beim Parsen erstellt wurden). Und es gibt keinen Mutationsabschnitt mehr. Schließlich können Sie innerhalb der Aktionen sehen, dass wir auf den Status nur als Eigenschaften des this -Zeigers zugreifen. Sie müssen den Status nicht mehr übergeben und sich zu Aktionen verpflichten. Dies hilft nicht nur bei der Vereinfachung der Entwicklung, sondern erleichtert auch das Ableiten von Typen für TypeScript.

Um Vuex in Ihrer Anwendung zu registrieren, registrieren Sie Vuex anstelle Ihres globalen Shops:

 import { createVuex } from 'vuex' createApp(App) .use(createVuex()) .use(router) .mount('#app')

Um den Store schließlich zu verwenden, importieren Sie den Store und erstellen dann eine Instanz davon:

 import bookStore from "@/store"; export default defineComponent({ components: { BookInfo, }, setup() { const store = bookStore(); // Generate the wrapper // ...

Beachten Sie, dass das, was vom Store zurückgegeben wird, ein Factory-Objekt ist, das diese Instanz des Stores zurückgibt, egal wie oft Sie die Factory aufrufen. Das zurückgegebene Objekt ist nur ein Objekt mit den Aktionen, dem Zustand und den Gettern als Bürger erster Klasse (mit Typinformationen):

 onMounted(async () => await store.loadBooks()); const incrementPage = () => store.currentPage++; const decrementPage = () => store.currentPage--;

Was Sie hier sehen werden, ist, dass state (z. B. currentPage ) nur einfache Eigenschaften sind. Und Aktionen (zB loadBooks ) sind nur Funktionen. Dass Sie hier einen Store benutzen, ist ein Nebeneffekt. Sie können das Vuex-Objekt einfach als Objekt behandeln und Ihrer Arbeit nachgehen. Dies ist eine deutliche Verbesserung der API.

Eine weitere wichtige Änderung ist, dass Sie Ihren Shop auch mit einer Kompositions-API-ähnlichen Syntax generieren können:

 export default defineStore("another", () => { // State const isBusy = ref(false); const books = reactive(new Array≷Work>()); // Actions async function loadBooks() { try { this.isBusy = true; const response = await bookService.getBooks(this.currentTopic, this.currentPage); if (response.status === 200) { this.books = response.data.works; } } finally { this.isBusy = false; } } findBook(key: string): Work | undefined { return this.books.find(b => b.key === key); } // Getters const bookCount = computed(() => this.books.length); return { isBusy, books, loadBooks, findBook, bookCount } });

Auf diese Weise können Sie Ihr Vuex-Objekt genauso erstellen wie Ihre Ansichten mit der Kompositions-API, und es ist wohl einfacher.

Ein Hauptnachteil dieses neuen Designs besteht darin, dass Sie die Unveränderlichkeit des Zustands verlieren. Es gibt Diskussionen darüber, dies zu ermöglichen (nur für die Entwicklung, genau wie Vuex 4), aber es besteht kein Konsens darüber, wie wichtig dies ist. Ich persönlich denke, dass dies ein entscheidender Vorteil für Vuex ist, aber wir müssen sehen, wie sich das auswirkt.

Wo sind wir?

Die Verwaltung des freigegebenen Zustands in Single-Page-Anwendungen ist ein entscheidender Teil der Entwicklung für die meisten Apps. Einen Spielplan zu haben, wie Sie in Vue vorgehen möchten, ist ein wichtiger Schritt beim Entwerfen Ihrer Lösung. In diesem Artikel habe ich Ihnen mehrere Muster für die Verwaltung des freigegebenen Zustands gezeigt, einschließlich der Neuerungen für Vuex 5. Hoffentlich haben Sie jetzt das nötige Wissen, um die richtige Entscheidung für Ihre eigenen Projekte zu treffen.