0%

Programmingプログラミングナレッジ

Posted:2019.05.20

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

過去記事「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を使うという形で統一しておくのもいいかもしれませんね。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】