Vue+VuexのデータフローをCQSライクに設計する方法
Vue + Vuexを使ったWebアプリケーションを開発していて、以下のような悩みにぶち当たったことありませんか？ 悩み1. VuexのmapHelperを使うとコードが読みにくくなる 「created内で呼ばれているこの関数はどこに定義されているんだ…？ methods？ それともStoreのアクション…？」 「import部分を見るにこのComponentはどのStoreにも依存してなさそうだ…。と思いきや、mapStateでいろんなStoreの値を読み込んでいるぞ…」 悩み2. ビジネスロジック層がない 「ページ読み込み時に走るAPIアクセスはどこに実装されている？ Componentのcreated？ Storeのアクション？ ロジックがまとまっている層がなくて処理の入り口を見つけにくい…」 「クリックされたら見た目を変えてAPIアクセスしてStoreを更新する実装をしたいけど、ど
VuexのStore設計のTips - 薄いGetter
Vue + Vuexで中〜大規模なアプリケーションの開発をするとき、どんな設計にするか未だによく悩みます。試してみては捨ててを繰り返していて、そろそろ自分の中でベターなパターンを固めたいと思いつつも固まらず、気づけば数年経ちました。 そういった前提を踏まえつつではありますが、現時点で設計時に意識していることをTips的に少しずつまとめてみようと思います。今回はVuexのGetterに関するお話です。 Getterの役割を見直す 副作用のないクエリとして実装する プロパティアクセスとメソッドアクセスを区別して命名する プリミティブでシンプルなクエリとして実装する 表示用の加工処理はComponentに実装する 例外1. 加工された値の賞味期限が長い場合 例外2. 加工処理が複数Componentで繰り返される場合 おわりに Getterの役割を見直す VuexはFluxアーキテクチャを参考に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
