Vue Composable zur Verwaltung des globalen Status ohne Pinia

Eine globale Zustandsverwaltung kann ohne den Einsatz von Pinia erreicht werden.

Ich werde eine einfache Implementierungsmethode unter Verwendung von Vues reaktiven und toRefs zusammenfassen.

Implementierung

import { reactive, toRefs } from 'vue';

interface State {
  mode: "dark" | "light" | "system"
}

const state = reactive({
   mode: "system";
})

export function useDataStore() {
  const { mode } = toRefs(state);

  const changeMode = (nextMode: State["mode"]) => {
    state.mode = nextMode;
  }

  return {
    mode,
    changeMode
  }
}

Punkte

1. reaktiv: Reaktiven Zustand auf Modulebene erstellen
2. toRefs: Zustandseigenschaften in separate Referenzen umwandeln
3. Globaler Geltungsbereich: Durch die Verwaltung des Status auf Modulebene kann von jeder Komponente aus darauf zugegriffen werden.

Wie man es benutzt

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

const { mode, changeMode } = useDataStore();
</script>

<template>
  <div>
    <p>Current mode: {{ mode }}</p>
    <button @click="changeMode('dark')">Dark</button>
    <button @click="changeMode('light')">Light</button>
  </div>
</template>

Zusammenfassung

Ein einfacher globaler Zustand kann mithilfe der Standard-API von Vue vollständig realisiert werden, ohne Pinia einzuführen.

Diese Methode ist leichtgewichtig und leicht zu verstehen für kleine Projekte oder wenn Sie einen sehr spezifischen globalen Status benötigen.