state からデータを取り出すための関数群。 これが使われるところは決まっていて、Vue オブジェクト内の算出プロパティで呼ばれることがほとんどである。 state に対する SQL の SELECT のような位置づけである。

このように記述する

var store = new Vuex.Store({
    state:{
        hoge: [
            "123", "456", "789",.... //省略
        ]
    },
    getters: {
        hogehoge: function(state, getters){
             return state.hoge[42];
        }
    }
};

使いたい名前をキーにして第一引数に state、第二引数に getters を取る関数を実装する。 state は store で設定している state そのものであり、getters は getters そのものである。

ちなみに getters は階層化して整理して記述は出来なくなっていて、必ず直下のキーに対して関数を書く必要がある。 1個しかなくしかも階層化できないとなるとこりゃ厄介そうだが、modules という仕組みがあってこれにより関数部分を複数のファイルに分割できるそうなのでカオスになったらそっちを使うことになるだろう。

場所はその用途からしても、Vue オブジェクト内の算出プロパティで使われることが多い

このように getters からキーで指定する。

var hoge = store.getters.hogehoge;

ポイントは関数では無いということである。もう計算結果が入っている状態のプロパティを取り出すだけである。

var hoge = this.$store.getters.hogehoge;

getter は第二引数で getters を取るので

var hoge = getters.hogehoge;

これは使用用途がもうほ限定されていて state 中の特定のオブジェクトを抜き出す場合に実装される。 つまり findById である。 このように記述する

var store = new Vuex.Store({
    state:{
        items: [
            {id: "123", name: "hoge"},
            {id: "456", name: "piyo"},
            {id: "789", name: "fuga"}
        ]
    },
    getters: {
        hogehoge: (state, getters) => (id, name) => {
             var items = state.items.filter((item) => {
                 return item.id === id && item.name === name;
             });
             return items[0]
        }
    }
};

設定する関数は state, getter を引数に取る関数で、その関数は検索結果を返す関数を返すように実装する

使う場合は先程とほぼ同じだが通常の関数実行通り括弧に引数を渡すことになる。

var piyo = this.$store.getters.hogehoge("456", "piyo");

変わったところとしては、mutations の関数内からはこの getter は呼ぶことができない。 issue として上がっていることも多いが却下されている。

おそらく Flux の設計思想と合わないということのようだが、Vuex は個別のデータ管理をやめて、統合管理したのだから、その統合部分から個別部分を抜き出す操作というのが非常に必要になると思われる。

そのような場合は action に実装してそれを mutation からコールするらしい。 知らんがな。