リアクティブな書き方、アロー演算子アレルギーを克服する

例えば「Vuex」の「getters」の書き方。

お恥ずかしながらイキって「ES6」で書いた結果、自分で読めなくなってしまう事があるんです。
いろんな書き方あると思うんですが、結論コレが一番意味が分かりやすいと思います。

store.js

export default new Vuex.Store({
  state: {
    test: 'initial state',
  },
  getters:{
    test(state) {
      return state.test;
    },
  },
});

App.vue.js

computed: {
  test() {
    return this.$store.getters['test']
  },
},

Javascriptの昔の書き方を今風に変換する

これは大昔の書き方です。配列に入れてリターンで返すやつ。

function test(state){
  var array = new Array();
  array = state['test'];
  return array;
};
test(state);

　↓　最近のES5ってこんな感じですよね。

var test = function( state ){
  var array[] = state.test;
  return array;
};
test(state);

　↓　それをリアクティブな感じにすると、Vueで使えます。

test: function(state) {
  return state.test;
},

　↓　もっと省略した書き方ができます。

test(state) {
  return state.test;
},

　↓　ES6のアロー演算子。

test: (state) => state.test,

アロー演算子・・・

function{ return }を => と、省略して書けるのは分かるけど、
なんとなく、気分的にですが return 書いてないから左の変数に値が返ってきてないような気になるんですよね。

誰かが
「アロー演算子は（〜の中の）って読むと意味が分かる」って言ってました。
ダイレクトに値を取り出せる的な意味なんだそうですが、個人的には矢印を逆方向して欲しかったッスね〜

test <- state.test

こっちのほうが、変数に値がリターンされてる感あるじゃないですかｗ
以上です。