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