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

序文

前回、フロントエンドのアーリーチャットカンファレンスを観ていたとき、YouさんがまたもやVueUseというライブラリについて言及していました。好奇心からクリックして見てみました。わあ、私もまさにそんな感じです。これは私がかつてフックライブラリの Vue バージョンを自分で書きたかったことではないでしょうか? (vue3 と hooks は似すぎていると思うので) でもまだあまり得意ではないし、夢が打ち砕かれてしまいました。一緒に見ていきましょう! VueUseの作者Anthony FuがコンポーザブルVueを公開

VueUseとは

VueUse は Vue.use ではありません。これは、Vue 2 および 3 に対応する Vue Composition API の共通ツールセットです。これは、この種のライブラリの中では世界で最も評価の高いものの 1 つです。当初の目的は、もともとレスポンシブ性をサポートしていなかったすべての JS API をレスポンシブにし、プログラマーが関連するコードを自分で書く手間を省くことでした。

VueUse は、Composition API に基づくユーティリティ関数のコレクションです。簡単に言えば、これは、いくつかの一般的な機能をすばやく実装して、自分で機能を作成して反復的な作業内容を解決する必要がないようにするツール機能パッケージです。そして、機会構成 API がカプセル化されます。 vue3 をより快適に使いこなせるようになります。

使いやすい

VueUseをインストールする

npm と @vueuse/core

Vueを使用する

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

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

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

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

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

上記の VueUse から、useMouse、usePreferredDark、useLocalStorage の 3 つの関数がインポートされます。 useMouse は、現在のマウス座標を監視するメソッドです。マウスの現在の位置をリアルタイムで取得します。 usePreferredDark は、ユーザーが暗い色を好むかどうかを判断する方法です。ユーザーが暗いテーマを好むかどうかをリアルタイムで判断します。 useLocalStorage は、データを永続化するために使用されるメソッドであり、データをローカルストレージに永続化します。

おなじみの手ぶれ補正やスロットル機能もあります

'@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>
</テンプレート>

上記の例では、要素の外側をクリックしたときにコールバック関数をトリガーする onClickOutside 関数が使用されています。これが close 関数です。コンポーネントでの使用方法は次のとおりです

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

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

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

注意⚠️ ここでの OnClickOutside 関数は関数ではなくコンポーネントです。 package.json に @vueuse/components がインストールされている必要があります。

グローバル状態を共有する機能もある

//ストア.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を返す
  },
})

もっと

詳細については、VueUseのドキュメントを参照してください。また、別のvue-demiもあります。

Vue の新しいおもちゃである VueUse の具体的な使い方については、これで終わりです。Vue VueUse に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: