Vuexのステート(state)にアクセスする算出プロパティ(computed)をコンポーネントごとに毎回定義したり、あるいは、毎回インポートして使うのは同じコードを何度も書くことになり、あまり良い方法とはいえません。
そんな時はゲッター(getters)を使いましょう。
ゲッターを定義しよう
下記のコードをもとに解説していきますので、もしよければローカル環境にコードをコピーして操作しながら読み進めていただけるとわかりやすいと思います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>vuex-practice2</title> </head> <body> <h1>Vuexの練習(gettersとactions)</h1> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js"></script> <script> const store = new Vuex.Store({ }) </script> </body> </html> |
今回はECサイトで1,000円以上の商品をフィルタリングする関数を複数のコンポーネントで使うという想定で進めていきます。事前準備として、まずはstateに商品情報を登録しておきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script> const store = new Vuex.Store({ // ここから追加 state: { items: [ { name: 'itemA', price: 1500 }, { name: 'itemB', price: 700 }, { name: 'itemC', price: 2000 }, { name: 'itemD', price: 300 }, { name: 'itemE', price: 1000 } ] } // ここまで追加 }) </script> |
つぎにgettersに1,000円以上の商品のみを取り出す関数を登録します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <script> const store = new Vuex.Store({ state: { items: [ { name: 'itemA', price: 1500 }, { name: 'itemB', price: 700 }, { name: 'itemC', price: 2000 }, { name: 'itemD', price: 300 }, { name: 'itemE', price: 5000 } ] }, // ←カンマの入れ忘れ注意！ // ここから追加 getters: { getItems: state => { return state.items.filter(item => item.price >= 1000) } } // ここまで追加 }) </script> |
では、ゲッターを参照してみましょう。store.gettersから参照できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <script> const store = new Vuex.Store({ state: { items: [ { name: 'itemA', price: 1500 }, { name: 'itemB', price: 700 }, { name: 'itemC', price: 2000 }, { name: 'itemD', price: 300 }, { name: 'itemE', price: 5000 } ] }, getters: { getItems: state => { return state.items.filter(item => item.price >= 1000) } } }) // コンソール画面に出力 console.log(store.getters.getItems) </script> |
コンソール画面に下記のように表示されれば参照できています。
今回の例では、ストアを定義したコンポーネント内から参照したため、store.gettersで問題ありませんでしたが、実際はストアを定義したコンポーネントとは別のコンポーネントからゲッターを参照することがほとんどだと思います。
その場合は、下記のようにコンポーネント内の算出プロパティ(computed)からゲッターの値を返すようにします。
1 2 3 4 5 6 7 | export default { computed: { getItems () { return this.$store.getters.getItems } } } |
ゲッターはプロパティとしてアクセスできます
先ほど1,000円以上の商品を配列として取り出すことはできましたが、配列のままだと見づらいので、すこしだけ加工みましょう。ゲッターは第2引数としてゲッター(getters)を受け取ります。商品名を取り出してコンソールに出力するfetchName関数を定義してみます。
1 2 3 4 5 6 7 8 9 10 11 12 | getters: { getItems: state => { return state.items.filter(item => item.price >= 1000) }, // ←カンマの入れ忘れ注意！ // ここから追加 fetchName: (state, getters) => { getters.getItems.forEach(item => console.log(item.name)) } // ここまで追加 } |
fetchNameを呼び出してみましょう。
1 | store.getters.fetchName |
コンソール画面に下記のように表示されれば成功です。
全体のコードは下記になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>vuex-practice2</title> </head> <body> <h1>Vuexの練習(gettersとactions)</h1> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js"></script> <script> const store = new Vuex.Store({ state: { items: [ { name: 'itemA', price: 1500 }, { name: 'itemB', price: 700 }, { name: 'itemC', price: 2000 }, { name: 'itemD', price: 300 }, { name: 'itemE', price: 5000 } ] }, getters: { getItems: state => { return state.items.filter(item => item.price >= 1000) }, fetchName: (state, getters) => { getters.getItems.forEach(item => console.log(item.name)) } } }) console.log(store.getters.getItems) store.getters.fetchName </script> </body> </html> |
