JavaScriptの記法の意味を知りたいです

Question

解決したいこと

const gettersの1,2行目の解読

Vuexの学習中に起きた疑問

const state = {
  step: 1,
  count: 0,
}

const getters = {
  step: state => state.step,
  count: state => state.count,

  // step() {(state) => {
  //   return state.step
  // }},
  // count() {(state) => {
  //   return state.count
  // }}
}
.
.
.
以下質問に関係ないと思うので省略

gettersにあるstep:とcount:のコードが理解できなかったので有識者の方に伺いたいです。
私はコメントアウトしているコードのようにアロー関数の省略かと思いましたが、表示されないので詰まりました。

こちらがコメントアウトしていない

コメントアウトしたコードの場合

参考リンク

学習中に使っているQiitaの記事
アロー関数参考記事

Answer 1

const getters = {
  step: function(state) {return state.step},
}

レガシーに寄せるとこういう事になります。

step() {(state) => {
  //   return state.step
  // }},

これは

step(state){
   return state.step
 },

正しくはこうです。

Comments

[nabe_R]

レガシーに寄せていただいたことで理解できました！
ありがとうございます！
コメントアウト部分も書き方間違っている+正しい書き方はアロー関数ではない。
という理解で合っていますか？
こちらに関しましては私の甘えですので無視していただいても何ら問題ございません。

[mikkame]

これには関数の定義と、オブジェクト作成方法の2つの話が噛み合っていて、複数の書き方があります。
関数の定義　→　アローは無名になるため、オブジェクトのプロパティ名を書くためstep: state => となっています。 function () {}も無名なので、プロパティ名が必要です。
step(state) は、プロパティ名を省略したnamedの関数定義です。

[think49]

> 関数の定義　→　アローは無名になるため、オブジェクトのプロパティ名を書くためstep: state => となっています。 function () {}も無名なので、プロパティ名が必要です。

因果関係にやや語弊があります。
名前付き関数式を指定しても、プロパティ名の省略が出来ません。

const getters = { step: function step (state) {return state.step}};

省略記法は「プロパティ名」と「プロパティ値」を同時に指定します。
関数名の有無は直接的には関係しないと思います。

[nabe_R]

mkkame様、think49様ありがとうございます！
プロパティ名が肝なのですね！

[think49]

そうですね。
オブジェクト初期化子はES2015でかなり拡張されたので、MDNに目を通しておくことをお勧めします。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#Method_definitions