Gestione dello stato condiviso tra i componenti e l'API di composizione Vue

import { ref, computed } from 'nuxt-composition-api'

const state = ref(false)

export default function useColoration() {
  const toggle = () => (state.value = !state.value)

  return {
    state: computed(() => state.value),
    toggle
  }
}

Uno stato condiviso a livello gobale tra i componenti può essere ottenuto mantenendo la variabile state fuori dalla funzione esportata e restituendo le proprietà computed.

import useColoration from '~/use/coloration'

export default {
  setup() {
    const { state: colorationState, toggle: colorationToggle } = useColoration()
    return { colorationState, colorationToggle }
  }
}

Vue Composition API
Nuxt Composition API