序文前回、フロントエンドのアーリーチャットカンファレンスを観ていたとき、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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: CSS3 における構造擬似クラスセレクターと擬似要素セレクターの使い方の詳細な説明
>>: 1つの記事でNavicat for MySQLの基本を理解する
序文Tomcat は優れた Java コンテナですが、避けられない小さな落とし穴もいくつかあります。...
目次1. MySQLデータのバックアップ1.1、データをバックアップするためのmysqldumpコマ...
Dockerイメージのインポートとエクスポートこの記事では、移行、バックアップ、アップグレードなどの...
アプリケーションシナリオ1: ドメイン名ベースのリダイレクト会社の古いドメイン名は www.accp...
目次1. 基本タイプ2. オブジェクトタイプ2.1 配列2.2 タプル2.3 オブジェクト3. 型推...
Linux 上の LibreOffice で Microsoft ドキュメントを開くと、フォントが少...
フロントエンド開発を行っている初心者の学生を多く見かけますが、彼らの効率は比較的遅いです。常にコード...
この記事ではMySQL 5.7.16のインストールと設定方法を記録します。具体的な内容は以下のとおり...
1. RTMP RTMP ストリーミング プロトコルは、Adobe が開発したリアルタイムのオーディ...
目次chmod例権限に関する特別な注意分析するチョーンchgrp umask Linux オペレーテ...
目次ステップ1. ルーティング ルールを設定し、子構成項目を使用します。 2. ジャンプ(フルパスを...
目次1. 関数シグネチャ2. 関数のオーバーロード2.1 オーバーロードされたシグネチャは呼び出し可...
一般的に言えば、コンテナが起動した後、ポート マッピングを通じてコンテナが提供するサービスを使用...
Linuxシステムでサービスの起動とシャットダウンを構成する1. コマンドcd /etc/init....
MySQL のインストール時にいくつかの問題が発生しました。オンラインで見つけた回答は似たようなもの...