vuex での Getter の使用法の詳細な説明

vuex での Getter の使用法の詳細な説明

序文

Vuex を使用すると、ストア内に「ゲッター」を定義できます (これはストアの計算されたプロパティと考えることができます)。計算プロパティと同様に、ゲッターの戻り値は依存関係に基づいてキャッシュされ、依存関係の値が変更された場合にのみ再計算されます。

公式サイトを例に挙げてみましょう。公式サイトのコードは以下のとおりです。

コンポーネント内でアクセスするには、次のコードを使用します。

this.$store.getters.doneTodosCount

1. 説明

ゲッターのアクセサー関数は、デフォルトで 2 つのパラメーター (state、getters) を渡します。最初のパラメーター state はデータにアクセスするために使用でき、getters パラメーターはアクセサー内の他のアクセサー関数にアクセスするために使用できます。ほとんどの場合、最初のパラメータのみが必要です。アクセサ関数を定義するときは、上記の例のように最初のパラメータのみを記述します。これらのアクセサー プロパティにアクセスする場合、関数呼び出しではなく、コンポーネント内の計算プロパティと同じように呼び出されます。

これは、2 番目のパラメータ ゲッターを使用する例です。計算プロパティを呼び出すのと同じように、コンポーネント内で次のコードを直接使用して呼び出します。 2 番目のパラメータはデフォルトで渡されます。

this.$store.getters.doneTodos

2. ゲッターは関数を返す

ゲッターにパラメータを渡すには、ゲッターに関数を返させます。したがって、その主な機能はパラメータを渡すことです。

コンポーネント内で this.$store.getters.getTodoById に直接アクセスすると、関数が返されます。次に、関数を呼び出してパラメータを関数に渡すと、関数の結果が取得されます。

3. mapGettersオブジェクトを使用して展開する

コンポーネントの計算プロパティでは、次のメソッドを直接使用してゲッタープロパティを簡単に参照し、通常の計算プロパティを呼び出すのと同じように使用できます。

ゲッター プロパティに別の名前を付ける場合は、オブジェクト形式を使用します。

これらの知識ポイントは、ドキュメントを読むだけでは理解しにくいかもしれませんが、手動で実践することで簡単に消化し理解することができます。

Vuex ゲッターパラメータ渡し方法

ゲッター: {
    getProductByid: (状態) => (ID) =>
    {
        state.productList.find(item => item.id === id) を返します。
    }
}

名前空間を使用して呼び出す場合:

this.$store.getters['yournamespace/getProductByid'](id);

名前空間なしでの呼び出し:

this.$store.getters.getProductByid(id);

要約する

これで、vuex での Getter の使用に関するこの記事は終了です。Vuex Getter の使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vuex でのゲッター計算とフィルタリング操作の詳細な説明
  • vuex の補助関数 mapGetters の基本的な使い方の詳細な説明
  • Vuexのゲッター属性の具体的な使い方について話す
  • vuex での mapState、mapGetters、mapActions、mapMutations の使用
  • Vuex でゲッターとアクションを使用するための追加手順

<<:  Debian システムでの自動パッケージ更新の問題を解決する方法

>>:  MySQLは「order by」がどのように機能するかを簡単に理解します

推薦する

Linux で jar パッケージを起動してバックグラウンドで実行する方法

jar パッケージを実行する Linux コマンドは次のとおりです。方法1: java -jar s...

vue3 を使用してマテリアル ライブラリを構築する方法

目次なぜマテリアルライブラリが必要なのでしょうか?材質は何ですか?素材の種類fuep、vue3 ベー...

nginx を使用して特定のインターフェース (URL) をブロックする方法

1. はじめに場合によっては、Web プラットフォームがオンラインになった後、サービス インターフェ...

MySQL のフィールドにデフォルトの時間を追加する方法

日付型の違いと用途MySQL には、日付、時刻、年、日付時刻、タイムスタンプの 5 つの日付タイプが...

Linuxで権限が拒否された場合の解決策の詳細な説明

許可が拒否されました:その理由は、ファイルの読み取り、書き込み、作成、削除などの権限がないためです。...

Navicat の MySQL へのリモート接続が遅い理由の詳細な説明

最終的な解決策は最後の写真にありますリモート データベース ( Linux システム) に接続したと...

MACでMYSQLデータベースのパスワードを忘れた場合の解決策

Mac オペレーティングシステムで MYSQL データベースのパスワードを忘れた場合の簡単な解決策1...

Dockerイントラネット侵入FRP展開の実装プロセスの分析

1. 設定ファイルディレクトリを作成するcd /ホームディレクトリmkdir frp最終的なディレク...

MySQL 8.0.13 で日付を 0000-00-00 00:00:00 に設定すると発生する問題を解決する

データベース操作を学び始めたばかりです。今日、データを保存していたところ、エラーが発生していることに...

Nginxの現在の制限設定の詳細な説明

この記事では、最も単純なものから最も複雑なものまで、Nginx の現在の制限構成を例を使って説明しま...

HTMLのセマンティクスといくつかの簡単な最適化についての簡単な説明

1. セマンティゼーションとは何ですか? Bing辞書の説明セマンティクス化とは、適切な HTML ...

Vue 日付時刻ピッカーコンポーネントの使い方の詳細な説明

この記事の例では、Vue の日付時刻ピッカーコンポーネントの具体的なコードを参考までに紹介します。具...

CSS で実装された円形のプログレスバー

成果を達成する 実装コードhtml <div class="wrap"&g...

Spring jdbc のデータベース操作オブジェクト モデルの詳細な例

Spring jdbc のデータベース操作オブジェクト モデルの詳細な例Spring Jdbc デー...

Linuxの貼り付けコマンドの使い方

01. コマンドの概要貼り付けコマンドは各ファイルを列ごとに結合します。これは、2 つの異なるファイ...