Vue Composable para gerenciar o estado global sem Pinia

A gestão global do estado pode ser alcançada sem o uso do Pinia.

Vou resumir um método de implementação leve usando reativo e toRefs do Vue.

implementação

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

Pontos

1. reativo: Crie um estado reativo no escopo do módulo
2. toRefs: converte propriedades de estado em referências separadas
3. Escopo global: Ao gerenciar o estado no nível do módulo, ele pode ser acessado a partir de qualquer componente.

##Como usar

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

resumo

Um estado global simples pode ser totalmente realizado usando a API padrão do Vue sem a introdução do Pinia.

Este método é leve e fácil de entender para projetos pequenos ou quando você precisa de um estado global muito específico.