Vue の新しいおもちゃ VueUse の具体的な使い方

npm と @vueuse/core

// インポート import { useMouse, usePreferredDark, useLocalStorage } from '@vueuse/core'

エクスポートデフォルト{
  設定（） {
    // マウスの位置を追跡する
    定数 { x, y } = マウスを使う()

    // ユーザーはダークテーマを好むか
    定数isDark = usePreferredDark()

    // 状態をlocalStorageに保持する
    const ストア = useLocalStorage(
      「マイストレージ」、
      {
        名前: 'Apple'、
        色: '赤'、
      },
    ）

    { x, y, isDark, store } を返します
  }
}

'@vueuse/core' から { throttleFilter、debounceFilter、useLocalStorage、useMouse } をインポートします。

// スロットル方式で localStorage の値を変更します const storage = useLocalStorage('my-key', { foo: 'bar' }, { eventFilter: throttleFilter(1000) })

// 100ms後にマウスの位置を更新します const { x, y } = useMouse({ eventFilter: debounceFilter(100) })

<スクリプトの設定>
'vue' から { ref } をインポートします
'@vueuse/core' から { onClickOutside } をインポートします。

定数el = ref()

関数close(){
  /* ... */
}

onClickOutside(el, 閉じる)
</スクリプト>

<テンプレート>
  <div ref="el">
    私の外側をクリック
  </div>
</テンプレート>

<スクリプトの設定>
'@vueuse/components' から { OnClickOutside } をインポートします。

関数close(){
  /* ... */
}
</スクリプト>

<テンプレート>
  <OnClickOutside @trigger="閉じる">
    <div>
      私の外側をクリック
    </div>
  </OnClickOutside>
</テンプレート>

//ストア.js
'@vueuse/core' から { createGlobalState, useStorage } をインポートします。

エクスポートconst useGlobalState = createGlobalState(
  () => useStorage('vue-use-local-storage'),
）

//コンポーネント.js
'./store' から {useGlobalState} をインポートします。

エクスポートデフォルトdefineComponent({
  設定（） {
    定数状態 = useGlobalState()
    {状態}を返す
  },
})

'@vueuse/core' から { useFetch } をインポートします。

const { isFetching、エラー、データ } = useFetch(url)

// 100ms タイムアウト const { data } = useFetch(url, { timeout: 100 })

// リクエストのインターセプション const { data } = useFetch(url, {
  非同期beforeFetch({ url, オプション, キャンセル }) {
    const myToken = getMyToken() を待つ

    if (!myToken)
      キャンセル（）

    オプション.ヘッダー = {
      ...オプション.ヘッダー、
      認証: `Bearer ${myToken}`、
    }

    戻る {
      オプション
    }
  }
})

// レスポンスインターセプション const { data } = useFetch(url, {
  afterFetch(ctx) {
    (ctx.data.title === 'HxH')の場合
      ctx.data.title = 'Hunter x Hunter' // 応答データを変更します

    ctxを返す
  },
})