[JavaScript] Vuex の中での foo => bar => foo + bar みたいなアロー関数2回続く場合の表記に慣れる。

2017/07/6

こんにちは。きんくまです。

Vuexの表記に慣れたいの続きです。

以前の投稿はこちら
>> [JavaScript | ES6] Vuexで … のシンタックスでエラー。ES6 で見慣れないシンタックスがあったとき

今回は state => step => みたいな感じにアロー関数が2回続く場合のものを見ていきます。
簡単にいうと「わかりにくいんじゃー！」

let mystore = new Vuex.Store({
    state: {
        count: 8
    },
    getters: {
        //あるstep数だけ増減した値
        stepCount: state => step => {
            return state.count + step
        }
    }
})
let stepCount = mystore.getters.stepCount(3)
console.log('stepCount = ' + stepCount)

2回続かない場合で1回の場合

まず2回続かない場合で1回の場合です。

let mystore = new Vuex.Store({
    state: {
        count: 8
    },
    getters: {
        //=> の後の { } を省略した形 return が自動で補完される
        nextCount: state => state.count + 1,

        //見慣れた形
        prevCount: state => {
            return state.count - 1
        },

        //上のはこういう書き方もできる
        prevCount2 (state) {
            return state.count - 1
        }
    }
})

let next = mystore.getters.nextCount //()がついていない
console.log('next = ' + next)

let prev = mystore.getters.prevCount //()がついていない
console.log('prev = ' + prev)

呼び出す際は、nextCountやprevCountの後に実行する()が呼ばれていません。こういう場合ここは()を書いたりすると思うのですが、そうではないのでVuex側で実行したものが返ってくるということなんだと思います。

ふつうの形ではこんな感じに()がつきます。

let count2 = 8
let obj = {
    nextCount: () => count2 + 1
}

let next2 = obj.nextCount() //()で実行
console.log('next2 = ' + next2)

2回続く場合

2回続く場合をみてみます。

let mystore = new Vuex.Store({
    state: {
        count: 8
    },
    getters: {

        //あるstep数だけ増減した値
        stepCount: state => step => {
            return state.count + step
        },

        //上のはこういう書き方もできる
        stepCount2: state => step => state.count + step,

        //もうちょっと見慣れた形にする
        stepCount3 (state) {
            return (step) => {
                return state.count + step
            }
        },

        //ES5だったらこんな感じになる
        stepCount4: function(state){
            return function(step){
                return state.count + step
            }
        }
    }
})

let stepCount = mystore.getters.stepCount(3) //()をつけて実行
console.log('stepCount = ' + stepCount)

下に行くほどES5で見慣れた形に近づきます。

実行する場合なのですが、今度は () が付いています。さきほどは値が返ってきましたが、今回は返ってくるものが関数だからです。

さらに注目ポイントは引数がどこに入るかですね。1段階目のstate部分はVuexで扱っているところで、2段階目のstep部分に適用されます。