前回の続編
テキストエリアを作成する。ここは、大きく変更はなくお手本の通りに進める。 どうやらエラー文言を出力するように記述するみたですね。
さっさ先に進めます。
次は、StringComp.vueの作成
src/components/modules/以下に作成したら、Form.vueで import, components, template に追加を行う。
今回は、src/components/modules/以下に作成したものは、Form.vueで使うので忘れずに追記ですな。
イベント
ボタンの作成、イベントを発火させるためにv-onディレクティブを使う。
そのまま写経するのは、簡単だがちゃんと理解は必要だね。
vue のメソッドを使用するみたですね。なぜ使うの、何が実現できるかくらいは把握すべきなのでちょっと調べます。
調べているうちにmapActionとmapGettersは、Vuex の学習でかなーーーり重要とわかる。
コンポーネント内のアクションのディスパッチ
正攻法のやりかたthis.$store.dispatch('xxx')で可能だがちゃーーーんと便利なヘルパーを用意してくれているのが Vuex のようですな。それが今回学ぶものの一つmapActionsである。(公式サイト)
よは、簡単にコンポーネント内のアクションを使おうぜ！と今は、把握しておく。
これを利用する際、必ず Vue インスタンスにstoreを追加しないといけない
mapGetters も同様
この編集では、mapGetters が使われていないように見えるがこのあとちゃんと使用している。
this.$store.getters['SOME']
store の作成
mapActions を使用するので store を追加する必要がある。先にmain.jsの修正を行うようだ。
この時点は、storeフォルダすら存在していないため保存したらエラーが発生する。フォルダと index.js を作成した段階でエラーが消える。
作成の順番が本当に正しいのか不明だけどここでふと思ったのは、mapActions の第一引数は、namespaced になっている。store の index.js で作成している const 名であるわけで、最初に store を作成すべきでは・・・？と思ったが結果動くなら順番なんて関係ないけどもふと気になった。
すべての実装を行い終わったら画面の確認ボタンを押下すると console にbuttonActionが出力される。なんと！！！！
実装してて、公式の解説を読んだりしてたけどもなるほどねー感覚的には理解しているがあくまで感覚なのでさらに深めたいですね。何個も作成して
Vuex
今回の大本命。ここまでの Vuex 自体は、出てはきているがなぜ必要なのか、何をするものなのかって言うのがここで解説をしてくださっている。
若干疑問なのは、HeadComp の title を computed で mapGetters？別にキャッシュする必要なくない？って思って公式見たらどうやらお作法っぽい
あと mapgetters の記述が人によって結構異なっている。おおよそは。module-typeってフォルダ以下にファイルを作成してそれらを import してッシ要している感じ。作成したファイルには、export defaultで const を export している感じ
mapGetters を実装
computed: mapGetters({
title: "getTitle"
})
と書きます。ここの書き方が色々とあるっぽい。spread peretorを使用した方法とかね
下記のような書き方もできます。
computed: {
...mapGetters(['title'])
}
自分的には、こちらの方がスッキリかなーと、ただ上の書き方だとそれをする上でどんなメソッドを呼ぶかわかるからケースバイケースなのかなーとも思う。
ES6 はしっかりと学んでおくのが吉
今回 mapGetters で使用したspread operatorを使用している。JS と言えば mozilla!!!!と言うことでこちらのリファレンスを参考してスプレッド構文
まぁー iterable って単語は、大切なのでこの際覚えておくといいかもねーと思いましたな。(初心者の方は特に。自分も人に説明できるレベルには至っていない)
ちょっと Tips Store に書く主な 4 つ
- state : 状態データ
- mutations : 状態の更新する処理
- getters : 状態を取得する処理
- actions : 非同期処理(mutations を呼び出す)
おっ？mapActions, mapGetters は、やった。のこりの二つもヘルパーがあると。そりゃそうかってな。
細かな話は、また別の投稿にしようと思う。
いつも脱線しかける
昔から一つのことに集中するとまぁー何時間でも平気なんだけども調べ物していると基本的に芋づる式にいろんな言葉、概念、繋がり、関連、共通項などなど気になり始めて調べまくって結果自分の中で index が大量に生成される。
学習する上で大切と思っているのは、以下
把握, 認識, 8割, 書き換え・置き換え, index集め
かなーって思っている。完璧に理解しようなどと恐れ多く(むしろ世の中の人の 9 割が完璧に理解なんてしてないと思っている)専門家でもなければ研究者でもなく、また学者でもないので
把握して使えるように理解して、集めた断片的知識を一つにどんどんつないでいって知識の層を深めていくのが大事だと思う。
んで何事も 8 割くらいの力で 8 割(仕事内容的に網羅している)の完成度で 8 割の理解でいいと思っている。
は？なんでと思う人もいるかもしれないけどその人ってたぶん人に説明できない人ならばそれって結果理解しているとは言えない。結果 8-9 割レベルってこと んじゃ最初から 8 割で業務こなせて人よりスキルがつくならそれが一番
人手不足の今の時代において何かに特化するから広く中深く(ちゅうふかく)人より頭一個抜けているエンジニアを目指すかどちらかと思う。
自分の今のスキル感は、そこにたどり着けていないからスキルのボトムアップと知識という index を集めまくる日々です。