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

Transcript

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

<Profile U Frontend Developer＠Paytner Inc4 U Vue Fes Japan2023 ボランティアスタッフ

<SNS U GitHub：@Shigeyuki-fukud6 U X(旧Twitter)：@fuqda90 About me

目次 UX Pub/Sub概I HX 状態どこで持つか問0 'X Pub/Subで状態管理したい場 #X Vuex /

PiniaでやるべきかR BX Composition APIでPub/Subしてみた場 X まとめ

目次 Å Pub/Sub概要 2. 状態どこで持つか問F C Pub/Subで状態管理したい場" 4 Vuex /

Piniaでやるべきか$ b Composition APIでPub/Subしてみた場( ' まとめ

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

イベントA Event Broker (イベント仲介者) Subscriber (イベント購読者) イベントB イベントC

目次 HR Pub/Sub概要 3. Pub/Subで状態管理したい場 'R Vuex / PiniaでやるべきかE R

Composition APIでPub/Subしてみた場 R まとめ 2. 状態どこで持つか問題

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

コンテナコンポーネント各種フォーム用コンポーネント〇〇連携〇〇を連携解除〇〇設定

目次 IT Pub/Sub概要 2. 状態どこで持つか問$ 4. Vuex / PiniaでやるべきかF 6T

Composition APIでPub/Subしてみた場 T まとめ qT Pub/Subで状態管理したい場面

Pub/Subで状態管理したい場面コンポーネントがネストしている中で子コンポーネントの UI操作をトリガーにモーダルを表示したい場面親コンポーネント (/pages) で状態を持つ前提とすると  モーダルの開閉フラグをネストしてるコンポーネント間でバケツリレーするのはしんどい...

/pages配下のコンポーネントコンテナコンポーネント各種フォーム用コンポーネントボタンを押下モーダルを表示〇〇連携〇〇を連携解除〇〇設定

目次 DI Pub/Sub概要 2. 状態どこで持つか問" I Pub/Subで状態管理したい場面 4I Composition APIでPub/Subしてみた場Â

ÄI まとめ 4. Vuex / PiniaでやるべきかP

Vuex / Piniaでやるべきか？いきなり結論 Vuex / PiniaをComposition APIで  代替実装可能なので不要！ ※導入するのは簡単だが、剥がすのは

かなりエネルギーが必要なので入れなくて済むなら入れないほうが長期的に見た際に吉というのが所感

目次 @G Pub/Sub概要 2. 状態どこで持つか問 G Pub/Subで状態管理したい場面 4. Vuex /

Piniaでやるべきか？ 6. まとめ 5. Composition APIでPub/Subしてみた場合

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

Composition APIでPub/Subしてみた場合今回の発表のComposition APIのPub / Subサンプルコードの概要

Composition APIでPub/Subしてみた場合 ※時間があったら... 今回のサンプルコードを使ったデモアプリを動かしてみる https://vue-fes-japan-2023-pub-sub-demo.netlify.app

目次 QU Pub/Sub概要 2. 状態どこで持つか問& #U Pub/Subで状態管理したい場面 4. Vuex /

Piniaでやるべきか？ 5. Composition APIでPub/Subしてみた場合 6. まとめ

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

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

fuqda

More Decks by fuqda

Other Decks in Programming

Featured

Transcript