Vue.jsの便利なComposition APIライブラリ VueUseを使用した感想

VueUseとは
useCounter
useMouse
useBattery
VueUseの公式ドキュメント

VueUseとは

Vue.jsの便利なComposition APIライブラリ。

VueUseを使用するとCounterなどVue.jsでよく使用されるものが簡単に作成できるようになる。

Vue 2で使用するには以下の手順でインストールしてmain.jsでVueCompositionApiをimportしてVue.useで適用する準備が必要。

vue create my-vueuse
cd my-vueuse
yarn add @vueuse/core@vue2 @vue/composition-api
yarn serve

import Vue from 'vue'
import App from './App.vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

new Vue({
  render: h => h(App),
}).$mount('#app')

useCounter

useCounterを使用するとCounterが使用できるようになる。

ライブラリを使用しないとこちらの例のようにコード量がそれなりに多くなってしまうが、useCounterを使用するとかなり少ないコード量で済む。

<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()
    return {
      count,
      inc,
      dec,
      set,
      reset,
    }
  }
})
</script>

useCounter サンプル

useMouse

マウスポインタのxとyの座標を取得できる。

特定の要素内のxとyの座標を取得する場合はuseMouseInElementを使用する。

useMouse サンプル

useBattery

Battery Status APIを簡単にできるようになるが、 Battery Status APIはDeprecated（非推奨）なので使用しないほうが良い。

…というか使用する機会がない。

<template>
  <ul>
    <li>isCharging: {{ isCharging }}</li>
    <li>chargingTime: {{ chargingTime }}</li>
    <li>dischargingTime: {{ dischargingTime }}</li>
    <li>level: {{ level }}</li>
    <li>supported: {{ supported }}</li>
  </ul>
</template>

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

export default defineComponent({
  setup() {
    const {
      isCharging,
      chargingTime,
      dischargingTime,
      level,
      supported
    } = useBattery()
    return {
      isCharging,
      chargingTime,
      dischargingTime,
      level,
      supported
    }
  }
})
</script>

useBattery サンプル

VueUseはuseBatteryのようにまともに使えないものがいくつかあるので注意が必要。