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の基本を理解する

推薦する

Tomcatのデフォルトパスの設定によって発生するプロジェクトURLの競合を解決する方法の詳細な説明

序文Tomcat は優れた Java コンテナですが、避けられない小さな落とし穴もいくつかあります。...

MySQL のスケジュールされた完全なデータベースバックアップ

目次1. MySQLデータのバックアップ1.1、データをバックアップするためのmysqldumpコマ...

Docker イメージのインポートとエクスポートのコード例

Dockerイメージのインポートとエクスポートこの記事では、移行、バックアップ、アップグレードなどの...

Nginx Rewriteモジュールを使用するいくつかのシナリオ

アプリケーションシナリオ1: ドメイン名ベースのリダイレクト会社の古いドメイン名は www.accp...

TypeScript の基本型の紹介

目次1. 基本タイプ2. オブジェクトタイプ2.1 配列2.2 タプル2.3 オブジェクト3. 型推...

Ubuntu ベースのディストリビューションに Microsoft TrueType フォントをインストールするチュートリアル

Linux 上の LibreOffice で Microsoft ドキュメントを開くと、フォントが少...

ウェブフロントエンドウェブ開発の一般的なプロセスの簡単な紹介

フロントエンド開発を行っている初心者の学生を多く見かけますが、彼らの効率は比較的遅いです。常にコード...

MySQL 5.7.16 無料インストール版のインストールと設定方法のグラフィックチュートリアル

この記事ではMySQL 5.7.16のインストールと設定方法を記録します。具体的な内容は以下のとおり...

Ubuntu 14 に Nginx-RTMP ストリーミング サーバーをインストールするチュートリアル

1. RTMP RTMP ストリーミング プロトコルは、Adobe が開発したリアルタイムのオーディ...

Linux の権限管理コマンド (chmod/chown/chgrp/unmask) の詳細な説明

目次chmod例権限に関する特別な注意分析するチョーンchgrp umask Linux オペレーテ...

Vue-router ネストルーティングの詳細な説明

目次ステップ1. ルーティング ルールを設定し、子構成項目を使用します。 2. ジャンプ(フルパスを...

TypeScript での関数オーバーロード

目次1. 関数シグネチャ2. 関数のオーバーロード2.1 オーバーロードされたシグネチャは呼び出し可...

Dockerコンテナ接続実装手順の分析

一般的に言えば、コンテナが起動した後、ポート マッピングを通じてコン​​テナが提供するサービスを使用...

LinuxシステムにTomcatをインストールし、サービスの起動とシャットダウンを構成する

Linuxシステムでサービスの起動とシャットダウンを構成する1. コマンドcd /etc/init....

Windows 7 で MySQL 8.0.16 をインストールして使用する場合、パスワードの変更と Navicat への接続に関する問題が発生する

MySQL のインストール時にいくつかの問題が発生しました。オンラインで見つけた回答は似たようなもの...