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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vueカスタムコンポーネント(Vue.use()で使用)はインストールの使用法です
  • Vue における Vue.use() の原理と基本的な使用法
  • ソースコードから使用方法まで、vue.use() メソッドについて簡単に説明します。
  • Vue.use() の使い方とインストール

<<:  CSS3 における構造擬似クラスセレクターと擬似要素セレクターの使い方の詳細な説明

>>:  1つの記事でNavicat for MySQLの基本を理解する

推薦する

HTMLポップアップdivはモバイルの中央揃えを実現するのに非常に便利です

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

素晴らしいCSS属性MASKの詳しい説明

この記事では、CSS の非常に興味深い属性マスクを紹介します。名前が示すように、マスクはマスクと翻訳...

Tomcat コアコンポーネントとアプリケーションアーキテクチャの詳細な説明

目次Web コンテナとは何ですか? HTTP の性質HTTP リクエスト応答の例クッキーとセッション...

レスポンシブフレームワークのテーブルヘッダーの自動改行問題に対する簡単な解決策

最近、Bootstrap を使って Web サイトを開発しています。表を処理していたところ、PC で...

MySQLデータの同時更新を処理する方法

UPDATE はロックしますか?以下のような場合、SQL文はロックされますか? テーブル1を更新しま...

MongoDBのパフォーマンスを向上させる方法

MongoDB は高性能なデータベースですが、使用していくうちにパフォーマンスの問題が発生することが...

Reactコンポーネントのライフサイクルの詳細な説明

目次1.ライフサイクルとは何か2. 読み込みプロセス1.コンストラクタ2. レンダリング3. コンポ...

Vue でよく使われる高階関数と包括的な例

1. 配列のよく使われる高階関数配列があり、その配列に対して次の操作を実行したいとします。 100 ...

LinuxはMySQLデータベースの自動バックアップとスケジュールバックアップを毎日実装しています

概要バックアップは災害復旧の基礎であり、システム操作エラーやシステム障害によるデータ損失を防ぐために...

Dockerコンテナデータボリュームの原理と使用法の分析

コンテナデータボリュームとはデータがコンテナ内にある場合、コンテナを削除するとデータは失われます。例...

Mysql の大きな SQL ファイルの高速リカバリ ソリューションの共有

序文MySQL データベースを使用する過程では、データベースのバックアップと復元が必要になることがよ...

ポップアップウィンドウの上下中央左右と透明な背景のロックウィンドウ効果を実現する CSS

クリック後にポップアップボックスを実現し、上下左右に中央揃えし、灰色の透明マスクを追加してウィンドウ...

jsを使用して中国語からピンインへの変換の完全な手順を実行します

jsを使用して、中国語をピンインに変換するパッケージを作成しました。倉庫のアドレスはpinyin-p...

カルーセル例の JS 実装

この記事では、カルーセルチャートの小さなケースを実装するためのJSの具体的なコードを参考までに共有し...

redhat7 に yum 経由で mysql5.7.17 をインストールするチュートリアル

RHEL/CentOS シリーズの Linux オペレーティング システムには MySQL ソース自...