Ownedmedia ウェブ制作に役立つコンテンツを発信中!

Vue.js 2019.05.20

stateの値を参照するときに使えるgettersについて

Tags: ,,

過去記事「Vue CLIとVuexでアプリケーションの状態変化を扱う」ではアプリケーションの状態管理で扱う値のstateについて触れていました。記事内では直接stateの値にアクセスしていましたが、gettersというものを用いてstateの値を扱うことでいろんな要件に対応できるようになります。今回はそのgettersについてまとめていきたいと思います。

 

stateの値を参照したり算出するgetters

gettersはstateの値をそのまま返したり、算出プロパティのように値を計算して異なる値を出力させる役割を持っています。computedに近いものがあります。具体的には下記のように使われます。gettersはstateと同じstore.jsのファイル内に記述していきます。

【store.js】

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
  isBoolean: false
 },
 mutations: {
  ............
 },
 actions: {
  ............
 },
 getters: {
  getStateIsBoolean: function(state){
   return state.isBoolean
  }
 }
})

 

上記ではこのようにgettersでstateの値をそのままreturnで返している形になります。またfunctionの部分については下記のようにアロー関数で書かれることが多いようです。

getters: {
 getStateIsBoolean: (state) => state.isBoolean
}

 

gettersはテンプレート側で「$store.getters.GETTERS_NAME」呼び出すことができます。またスクリプト内ではthisが必要になります。gettersはそのまま使われることもあれば、computedで値を算出することも可能です。下記の例では、同じstateでもgettersによって値が異なるものが同じテンプレート内に存在しています。

【Vue】

<template>
 <div id="#app">
  <div class="change">gettersでstateの値を取得し、computedで変換して出力したもの:{{ changeStateVal }} // trueが表示される
  </div>
  <div class="unchanged">gettersでstateの値を取得し、そのまま出力したもの:{{ $store.getters.getStateIsBoolean }} // falseが表示される
  </div>
 </div>
</template>

<script>
 export default {
  computed: {
   changeStateVal() {
    return !this.$store.getters.getStateIsBoolean
   }
  }
 }
</script>

 

また、gettersの中であらかじめstateの値を算出しておくことができます。下記はgettersの中でstateの値である配列をフィルタリングしている例になります。

【store.js】※一部抜粋

export default new Vuex.Store({
 state: {
  number: [ 9, 34, 175, 396, 1024, 4198 ]
 },
 mutations: {
  ............
 },
 actions: {
  ............
 },
 getters: {
  getStateNumber: (state) => {
   return state.number.filter(function(val){
    return val < 500
   })
  }
 }
})

 

テンプレート側ではcomputedの算出プロパティを使わず、そのままgettersを出力しているすることで算出された値を扱うことができます。

【Vue】※一部抜粋

<template>
 <div id="#app">
  <div class="result">stateにある値で500以下のもの:{{ $store.getters.getStateNumber }} 
  </div>
 </div>
</template>

 

stateの値を算出できるということもありますが、何かと便利なのでコーディングのルールとしてstateの値にアクセスする場合にはgettersを使うという形で統一しておくのもいいかもしれませんね。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?