JavaScript

Vuexのゲッターを使って効率的に開発をすすめよう|Vuex

質問者
質問者
Vuexのゲッターについて教えてください。

Vuexのステート(state)にアクセスする算出プロパティ(computed)をコンポーネントごとに毎回定義したり、あるいは、毎回インポートして使うのは同じコードを何度も書くことになり、あまり良い方法とはいえません。

そんな時はゲッター(getters)を使いましょう。

ゲッターを定義しよう

下記のコードをもとに解説していきますので、もしよければローカル環境にコードをコピーして操作しながら読み進めていただけるとわかりやすいと思います。

今回はECサイトで1,000円以上の商品をフィルタリングする関数を複数のコンポーネントで使うという想定で進めていきます。事前準備として、まずはstateに商品情報を登録しておきます。

つぎにgettersに1,000円以上の商品のみを取り出す関数を登録します。

では、ゲッターを参照してみましょう。store.gettersから参照できます。

コンソール画面に下記のように表示されれば参照できています。

今回の例では、ストアを定義したコンポーネント内から参照したため、store.gettersで問題ありませんでしたが、実際はストアを定義したコンポーネントとは別のコンポーネントからゲッターを参照することがほとんどだと思います。

その場合は、下記のようにコンポーネント内の算出プロパティ(computed)からゲッターの値を返すようにします。

ゲッターはプロパティとしてアクセスできます

先ほど1,000円以上の商品を配列として取り出すことはできましたが、配列のままだと見づらいので、すこしだけ加工みましょう。ゲッターは第2引数としてゲッター(getters)を受け取ります。商品名を取り出してコンソールに出力するfetchName関数を定義してみます。

fetchNameを呼び出してみましょう。

コンソール画面に下記のように表示されれば成功です。

全体のコードは下記になります。

筆者
筆者
複数のコンポーネントで使う関数はゲッターに定義すると効率的に開発できますので、適宜、Vuexのゲッターを使っていきましょう。