Vue Composable pour gérer l'état global sans Pinia

La gestion globale de l’état peut être réalisée sans utiliser Pinia.

Je vais résumer une méthode d’implémentation légère utilisant les réactifs et toRefs de Vue.

mise en œuvre

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
  }
}

Points

1. réactif : créer un état réactif à la portée du module
2. toRefs : convertir les propriétés d’état en références séparées
3. Portée mondiale : en gérant l’état au niveau du module, il est accessible depuis n’importe quel composant.

Comment utiliser

<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>

résumé

Un état global simple peut être entièrement réalisé à l’aide de l’API standard de Vue sans introduire Pinia.

Cette méthode est légère et facile à comprendre pour les petits projets ou lorsque vous avez besoin d’un état global très spécifique.