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 をよろしくお願いいたします。