前回までのあらすじ
HeadComp.vue に mapGetters を導入したところまでは、やったはず。
今回は、Form.vue に mapGetters の記述を追加から進めます。
mapGetters には、書き方が色々？
お手本の書き方
computed: mapGetters("Form", {
button: "getButton"
})
このように書いている。ただ mapGetters について調べているとどうもこの書き方は見かけないぞ・・・？ということになり mapGetters とより仲良くなるために調べました。 ちなみに公式サイト
ES6 の書き方を使用して(spread operator)の書き方が紹介されている。
調べ物をしてて最終的に気づくのってやっぱ公式サイトやリファレンスって最強じゃね？って話。さらにいうと実装されている中身をみるのが一番さいつよです。ただいろんなところに記載されているコードは、良くも悪くも書き方の参考として頭の片隅に入れておくのを忘れずに。
さて実際に自分がこの場面でいいなって思った書き方は以下です。 小さな規模ならわざわざ別名でマッピングする必要もないでしょうと考えました
computed: {
...mapGetters(
'Form',
['button']
)
}
ただこのファイルで Form という文字が二回出てくる時点でどうなのって思うのも正直なところ。ただしこの書き方をした場合同時にstore/index.jsの方も書き方を変更しないといけない
例えば下記のように
getters: {
button: (state, getters, rootState) => state.button[rootState.stepCount]
}
getters って必要なのか。。。？ちらっと最後まで見たが現状他のゲッターを受け取るようなことは書いてなかったが。。。ただ root の state へアクセスしたくまた使用したいから使わないけど第二引数に getters を書いていると言うことなのか。
引数を表にしている人がいた【Vuex】Store の各プロパティ引数メモ
ちなみに第 4 引数もあってrootGettersとかけるらしい
root の getters を使用できるってことかな。今その事案が頭に浮かばないから一旦そういうものとして先に進む
Form の制御
最初は、まず見本通りに進めます。
ここも面白い箇所かなと個人的には感じてます。
先ほどと同様な書き方で進めます。
button をアロー関数で記述したが今回も同じように記述する。 computed に関しては、ほぼみほ通りに書きましたが以下の箇所のみ書き換えた
...mapGetters('Textarea', ['error'])
とした 次に store の記述
const Textare = {
namespaced: true,
state: {
errorMsg: "入力は必須です"
},
getters: {
error: (state, getters, rootState) => {
if (rootState.errorFlag) {
return null
} else {
return state.errorMsg
}
}
}
}
アロー関数を今後も使っていきたいですね。書いてて気持ちいのと目に優しいコードと感じる。(個人的感想)
ここで chrome の拡張機能を使用して Vue の中が確認できるんで積極的に確認していくことが大切！！