15 - useToggle

[woojerry]

<script setup>
import { ref } from 'vue'

function useToggle(initialState) {
  const state = ref(initialState)

  const toggle = () => {
    const toggleState = state.value
    state.value = !toggleState 
  }

  return [state, toggle] 
}

const [state, toggle] = useToggle(false)
</script>

<template>
  <p>State: {{ state ? 'ON' : 'OFF' }}</p>
  <p @click="toggle">
    Toggle state
  </p>
</template>