Mit der neuen Kompositions-API können Sie den Vuex-Speicher entfernen. Schauen wir uns ein einfaches Beispiel an, wie dies erreicht werden kann. Und bedenken Sie die Vor- und Nachteile.
Beispiel
Nehmen wir einen Beispielzähler in Vuex aus der einfachsten Store- Dokumentation und implementieren ihn mithilfe der Kompositions-API.
Zählermodul Module / counter.ts:
import { ref } from 'vue'
const counter = ref(0)
export default function useCounter () {
const increment = () => {
counter.value++
}
return { counter, increment }
}
Beachten Sie, dass sich die Zählervariable außerhalb der Funktion useCounter () befindet. Wenn die useCounter-Funktion in verschiedenen Komponenten aufgerufen wird, verweist der Zähler auf dieselbe Instanz. Und das brauchen wir.
Die Verwendung unseres Zählers in verschiedenen Komponenten ist einfach:
<template>
<div>
{{ counter }}
</div>
<button @click="increment">+</button>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import useCounter from '@/modules/useCounter'
export default defineComponent({
name: 'App',
setup () {
const { counter, increment } = useCounter()
return { counter, increment }
}
})
</script>
Um den globalen Zähler zu verwenden, müssen Sie nur useCounter in die erforderlichen Module importieren und verwenden.
Wenn Sie den Zugriff auf die Zählervariable einschränken müssen, können Sie sie nicht exportieren, sondern die Getter-Funktion:
import { ref, computed } from 'vue'
const counter = ref(0)
const getCounter = computed(() => counter.value)
const increment = () => counter.value++
export default function useCounter () {
return { getCounter, increment }
}
Dafür und dagegen
Eines der großartigen Dinge an Vuex ist die Arbeit mit Vue.js Devtools. Es ist sehr praktisch, den gesamten globalen Status in Form eines Baums anzuzeigen, die Aufrufe von Mutationen mit den übergebenen Variablen anzuzeigen und auch in verschiedene Status zurückzukehren. Wie die Kompositions-API in den devtools von Vue.j unterstützt wird, ist noch nicht klar. Die Arbeiten sind noch nicht abgeschlossen.
Die Struktur von Vuex - Getter, Mutationen, Aktionen - mag syntaktisch redundant klingen, ermöglicht jedoch eine klare Darstellung und Trennung der Arbeit des Speichermoduls und ist eher ein Plus als ein Minus. Und wenn der Entwickler die Kompositions-API verwendet, entscheidet er alles selbst, er kann Süßigkeiten herstellen oder auch nicht.
Die Unterstützung von TypeScript ist eine Schwachstelle in Vuex. Alle Artikel, die versuchen, Vuex einzugeben, sehen einschüchternd aus. Und so wird ausführlicher Vuex sehr ausführlich. Wenn wir die Kompositions-API verwenden, ist es einfacher, TypeScript wie gewohnt zu verwenden.
Vuex verbindet sich als Plugin und ist über dieses. $ Store in jeder Komponente verfügbar. Im Fall der Kompositions-API müssen wir das Modul importieren. Es gibt keinen großen Unterschied, und beide Ansätze ermöglichen es Ihnen, mit dem globalen Zustand zu arbeiten.
Die Verwendung der Kompositions-API entlastet uns jedoch von unnötigen Abhängigkeiten und ermöglicht es uns, den globalen Status nach Belieben zu organisieren. Auf der anderen Seite bleibt die Frage des Testens. Die globalen Module selbst sind leicht zu testen, aber die Module, die sie verwenden, sind bereits schwieriger zu testen.
Fazit
Es ist noch nicht klar, ob es sich lohnt, Vuex aufzugeben, aber es gibt definitiv ein neues Tool, mit dem Sie die von Vuex gelösten Probleme lösen können. In naher Zukunft wird klar sein, welcher Ansatz in welchem Fall besser ist. In der Zwischenzeit haben die Vuex-Entwickler nicht angekündigt, das Projekt zu falten, und es wie zuvor gesehen. In der Vue3-Dokumentation befindet sich noch ein Link zu Vuex.