Composition API時代の Pub/Subパターンでの状態管理

by fuqda

Slide 1

Slide 1 text

Composition API時代の Pub/Subパターンでの状態管理 Vue Fes Japan 2023 2023/10/28 @fuqda

Slide 2

Slide 2 text

Slide 3

Slide 3 text

目次 UX Pub/Sub概I HX 状態どこで持つか問0 'X Pub/Subで状態管理したい場 #X Vuex / PiniaでやるべきかR BX Composition APIでPub/Subしてみた場 X まとめ

Slide 4

Slide 4 text

目次 Å Pub/Sub概要 2. 状態どこで持つか問F C Pub/Subで状態管理したい場" 4 Vuex / Piniaでやるべきか$ b Composition APIでPub/Subしてみた場( ' まとめ

Slide 5

Slide 5 text

Pub/Sub概要 Pub/Sub Publisher（イベント発行者）が発行したイベントをEvent Broker（イベント仲介者）がルーティングして、 Subscriber（イベント購読者）に伝達するイベント駆動型アーキテクチャのデザインパターンのこと。イベントA Publisher (イベント発行者) イベントB イベントC イベントA Event Broker (イベント仲介者) Subscriber (イベント購読者) イベントB イベントC

Slide 6

Slide 6 text

目次 HR Pub/Sub概要 3. Pub/Subで状態管理したい場 'R Vuex / PiniaでやるべきかE R Composition APIでPub/Subしてみた場 R まとめ 2. 状態どこで持つか問題

Slide 7

Slide 7 text

状態どこで持つか問題原則、stateは親コンポーネントに寄せる・基本的にバックエンド側と送受信する項目は、  　親(/pages)コンポーネントのみ持つことを許可。   ・子(/pagesを構成するパーツ)コンポーネントには、　状態を持たない方がシンプルになる・親や子にstateが点在すると保守性が悪化するので、　例外は許容しつつ基本は避けること /pages配下のコンポーネントコンテナコンポーネント各種フォーム用コンポーネント〇〇連携〇〇を連携解除〇〇設定

Slide 8

Slide 8 text

目次 IT Pub/Sub概要 2. 状態どこで持つか問$ 4. Vuex / PiniaでやるべきかF 6T Composition APIでPub/Subしてみた場 T まとめ qT Pub/Subで状態管理したい場面

Slide 9

Slide 9 text

Pub/Subで状態管理したい場面コンポーネントがネストしている中で子コンポーネントの UI操作をトリガーにモーダルを表示したい場面親コンポーネント (/pages) で状態を持つ前提とすると  モーダルの開閉フラグをネストしてるコンポーネント間でバケツリレーするのはしんどい... /pages配下のコンポーネントコンテナコンポーネント各種フォーム用コンポーネントボタンを押下モーダルを表示〇〇連携〇〇を連携解除〇〇設定

Slide 10

Slide 10 text

目次 DI Pub/Sub概要 2. 状態どこで持つか問" I Pub/Subで状態管理したい場面 4I Composition APIでPub/Subしてみた場Â ÄI まとめ 4. Vuex / PiniaでやるべきかP

Slide 11

Slide 11 text

Vuex / Piniaでやるべきか？いきなり結論 Vuex / PiniaをComposition APIで  代替実装可能なので不要！ ※導入するのは簡単だが、剥がすのはかなりエネルギーが必要なので入れなくて済むなら入れないほうが長期的に見た際に吉というのが所感

Slide 12

Slide 12 text

目次 @G Pub/Sub概要 2. 状態どこで持つか問 G Pub/Subで状態管理したい場面 4. Vuex / Piniaでやるべきか？ 6. まとめ 5. Composition APIでPub/Subしてみた場合

Slide 13

Slide 13 text

Composition APIでPub/Subしてみた場合今回の発表のComposition APIのPub / Subサンプルコードはこちら https://github.com/Shigeyuki-fukuda/nuxt-pub-sub-sample