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」がどのように機能するかを簡単に理解します

推薦する

mysql 5.7.11 winx64.zip インストールと設定方法のグラフィックチュートリアル

MySql データベース システムをインストールして構成します。 1. ダウンロード http://...

iptables および firewalld ツールを使用して Linux ファイアウォール接続ルールを管理する

ファイアウォールファイアウォールは一連のルールです。パケットが保護されたネットワーク空間に出入りする...

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

目次1. データベース操作2. データ型3. バックアップとリカバリ3. 操作4. 上級5. 知識補...

JavaScript でサウンド効果付きの花火効果を実装する

コードを書くのに 30 分かかりましたが、この HTML5 Canvas New Year Fire...

Centos7.5 は mysql5.7.24 バイナリ パッケージの展開をインストールします

1. 環境整備:オペレーティング システム: CentOS Linux リリース 7.5.1804 ...

MySQL 文字列連結と null 値の設定のためのインスタンス メソッド

#文字列連結 concat(s1,s2); テーブル内の last_name と first_nam...

CentOS7.8 に mysql 8.0.20 をインストールするための詳細なチュートリアル

1. MySQLソフトウェアをインストールするMySQL 公式 Yum リポジトリ、MySQL バー...

MySQLデータベースでゼロ値を含む日付の問題について簡単に説明します

デフォルトでは、MySQL は日付に 0 値を挿入することを受け入れますが、実際には日付の 0 値に...

SSH経由でローカルLinux仮想マシンに接続するプロセスを記録する

実験環境:物理マシン Windows 10 x64物理NIC情報IPv4 アドレス: 192.168...

Dockerスペースがいっぱいでコンテナに入れない場合の解決策

トラブル発生が突然で、業務も迫っていたため、現場のスクリーンショットを撮る時間がありませんでしたので...

フロントエンド Vue ユニットテストを始める

目次1. ユニットテストはなぜ必要なのでしょうか? 2. ユニットテストの書き方3. テストツール4...

ECMAScript の演算子を理解するための記事

目次単項演算子ブール演算子乗算演算子加法演算子関係演算子等価演算子条件演算子代入演算子カンマ演算子要...

Vue スキャフォールディング プロジェクトを作成するための詳細な手順

vue スキャフォールディング -> vue.cli大規模で完全に機能する Vue プロジェク...

MySQL ビューの一貫性を確保する方法の詳細な説明 (チェック オプション付き)

この記事では、例を使用して、MySQL ビューの一貫性を確保する方法 (チェック オプションを使用)...

docker に openjdk をインストールして jar パッケージを実行する方法

画像をダウンロード docker プル openjdkデータボリュームの作成java_appデータボ...