今日はフロントエンドのコーディングを進めて、使い慣れてないVuexなどをアプリに組みこもうとして悪戦苦闘していました。 勉強したことをアウトプットします。
Vuexの基本的な概念
state: 状態を持つ
getters: stateの値を取得する
actions: APIを呼び出したり、stateの値を変える処理を行う。commit()を使うことでmutationsの関数を呼び出す。
mutations: stateの値を変えることができる。mutations以外からstateの値を変えることは基本的にない。
tips
各componentからactionsを呼び出す時はthis.$store.dispatch()を使う。
Vuexのデータを取得するにはcomputedを使うのが良さそう。computedはstateの値が変わると再計算してくれるからというのが理由っぽいけどまだよくわかっていない。
storeのstateで所持している値はvueプロジェクトのどこのコンポーネントからでもthis.$store.state.オブジェクト名で参照できる。(重要)
stateの値を判定する時はgettersで定義した関数でstateの値を取得する？->グローバルに呼び出したい値はgettersで取得できるように数をgetters内に関数を用意しておくはず
gettersから複数の関数を一つのコンポーネント内で呼び出す時はmapGettersを使うとcomputedプロパティの中で配列でgettersを呼び出せて便利
...mapGettersのような記述はスプレッド構文というもの。Vue特有の構文ではなく、ES6で定義されているっぽい developer.mozilla.org
mapGettersmとかスプレッド構文とかぱっと見難しそうだが、結局はgettersを複数呼び出す際に効率良くコード書くための方法なので、冗長的にひとつずつgettersを書くやり方から慣れていって、リファクタリングする段階でスプレッド構文を試す、という考え方で良さそう。->多分スプレッド構文を書けなくて処理が実装できなくなることなどはなさそう
vuexはどこからでも参照できるグローバル変数なので、バグを生むリスクが高い。 そのためstateの値はmutationsでのみ変更できるようにする。
gettersは毎回リターンを書くので、アロー関数を使うとコードがすっきりする
mutationsの関数を呼び出す時はcommitを使う
this.$store.commit('function_in_mutations', 'arg')
その他ライブラリのメモ
- 日付処理にはmoment.jsというライブラリが使いやすそう。 qiita.com ...と思ったがメンテナンスモードに入っていてmoment.jsの開発チームは別のライブラリに移行を推奨しているという記事があり、難しそう。 mag.osdn.jp
上記記事の中から以下の文章が印象的でした。やはりWebの世界は移り変わりが激しいなと実感しました。
一方で、プロジェクトがスタートしたのは2011年。プロジェクトチームは「前世代のJavaScriptエコシステム向け」であり、「現在のWebは当時とは全く異なる」としている。時代に合わせて機能を加えてきたものの、設計は2011年当時と同じで、今後は新機能の開発よりも安定性を優先させるとしている。
