<template>
  <div>
    <h1>count: {{ count }}</h1>
    <button @click="inc()">Increment</button>
    <button @click="dec()">Decrement</button>
    <button @click="inc(5)">Increment (+5)</button>
    <button @click="dec(5)">Decrement (-5)</button>
    <button @click="set(100)">Set (100)</button>
    <button @click="reset()">Reset</button>
  </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api'
import { useCounter } from '@vueuse/core'

export default defineComponent({
  setup() {
    const { count, inc, dec, set, reset } = useCounter()
    console.log({count})
    return {
      count,
      inc,
      dec,
      set,
      reset,
    }
  }
})
</script>

元記事を表示する