序文Vuex を使用すると、ストア内に「ゲッター」を定義できます (これはストアの計算されたプロパティと考えることができます)。計算プロパティと同様に、ゲッターの戻り値は依存関係に基づいてキャッシュされ、依存関係の値が変更された場合にのみ再計算されます。 公式サイトを例に挙げてみましょう。公式サイトのコードは以下のとおりです。 コンポーネント内でアクセスするには、次のコードを使用します。
1. 説明ゲッターのアクセサー関数は、デフォルトで 2 つのパラメーター (state、getters) を渡します。最初のパラメーター state はデータにアクセスするために使用でき、getters パラメーターはアクセサー内の他のアクセサー関数にアクセスするために使用できます。ほとんどの場合、最初のパラメータのみが必要です。アクセサ関数を定義するときは、上記の例のように最初のパラメータのみを記述します。これらのアクセサー プロパティにアクセスする場合、関数呼び出しではなく、コンポーネント内の計算プロパティと同じように呼び出されます。 これは、2 番目のパラメータ ゲッターを使用する例です。計算プロパティを呼び出すのと同じように、コンポーネント内で次のコードを直接使用して呼び出します。 2 番目のパラメータはデフォルトで渡されます。
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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Debian システムでの自動パッケージ更新の問題を解決する方法
>>: MySQLは「order by」がどのように機能するかを簡単に理解します
jar パッケージを実行する Linux コマンドは次のとおりです。方法1: java -jar s...
目次なぜマテリアルライブラリが必要なのでしょうか?材質は何ですか?素材の種類fuep、vue3 ベー...
1. はじめに場合によっては、Web プラットフォームがオンラインになった後、サービス インターフェ...
日付型の違いと用途MySQL には、日付、時刻、年、日付時刻、タイムスタンプの 5 つの日付タイプが...
許可が拒否されました:その理由は、ファイルの読み取り、書き込み、作成、削除などの権限がないためです。...
最終的な解決策は最後の写真にありますリモート データベース ( Linux システム) に接続したと...
Mac オペレーティングシステムで MYSQL データベースのパスワードを忘れた場合の簡単な解決策1...
1. 設定ファイルディレクトリを作成するcd /ホームディレクトリmkdir frp最終的なディレク...
データベース操作を学び始めたばかりです。今日、データを保存していたところ、エラーが発生していることに...
この記事では、最も単純なものから最も複雑なものまで、Nginx の現在の制限構成を例を使って説明しま...
1. セマンティゼーションとは何ですか? Bing辞書の説明セマンティクス化とは、適切な HTML ...
この記事の例では、Vue の日付時刻ピッカーコンポーネントの具体的なコードを参考までに紹介します。具...
成果を達成する 実装コードhtml <div class="wrap"&g...
Spring jdbc のデータベース操作オブジェクト モデルの詳細な例Spring Jdbc デー...
01. コマンドの概要貼り付けコマンドは各ファイルを列ごとに結合します。これは、2 つの異なるファイ...