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

Vue Fes Japan 2023のLT登壇用の資料。

Transcript

1. Composition API時代の Pub/Subパターンでの状態管理 Vue Fes Japan 2023 2023/10/28 @fuqda
2. <Profile U Frontend Developer＠Paytner Inc4 U Vue Fes Japan2023 ボランティアスタッフ <SNS U GitHub：@Shigeyuki-fukud6 U X(旧Twitter)：@fuqda90 About me
3. 目次 UX Pub/Sub概I HX 状態どこで持つか問0 'X Pub/Subで状態管理したい場 #X Vuex / PiniaでやるべきかR BX Composition APIでPub/Subしてみた場 X まとめ
4. 目次 Å Pub/Sub概要 2. 状態どこで持つか問F C Pub/Subで状態管理したい場" 4 Vuex / Piniaでやるべきか$ b Composition APIでPub/Subしてみた場( ' まとめ
5. Pub/Sub概要 Pub/Sub Publisher（イベント発行者）が発行したイベントをEvent Broker（イベント仲介者）がルーティングして、 Subscriber（イベント購読者）に伝達するイベント駆動型アーキテクチャのデザインパターンのこと。 イベントA Publisher (イベント発行者) イベントB イベントC イベントA Event Broker (イベント仲介者) Subscriber (イベント購読者) イベントB イベントC
6. 目次 HR Pub/Sub概要 3. Pub/Subで状態管理したい場 'R Vuex / PiniaでやるべきかE R Composition APIでPub/Subしてみた場 R まとめ 2. 状態どこで持つか問題
7. 状態どこで持つか問題 原則、stateは親コンポーネントに寄せる ・基本的にバックエンド側と送受信する項目は、
 　親(/pages)コンポーネントのみ持つことを許可。 
 ・子(/pagesを構成するパーツ)コンポーネントには、 　状態を持たない方がシンプルになる ・親や子にstateが点在すると保守性が悪化するので、 　例外は許容しつつ基本は避けること /pages配下のコンポーネント コンテナコンポーネント 各種フォーム用コンポーネント 〇〇連携 〇〇を連携解除 〇〇設定
8. 目次 IT Pub/Sub概要 2. 状態どこで持つか問$ 4. Vuex / PiniaでやるべきかF 6T Composition APIでPub/Subしてみた場 T まとめ qT Pub/Subで状態管理したい場面
9. Pub/Subで状態管理したい場面 コンポーネントがネストしている中で 子コンポーネントの UI操作をトリガーに モーダルを表示したい場面 親コンポーネント (/pages) で状態を持つ前提とすると
 モーダルの開閉フラグをネストしてるコンポーネント 間でバケツリレーするのはしんどい... /pages配下のコンポーネント コンテナコンポーネント 各種フォーム用コンポーネント ボタンを押下 モーダルを表示 〇〇連携 〇〇を連携解除 〇〇設定
10. 目次 DI Pub/Sub概要 2. 状態どこで持つか問" I Pub/Subで状態管理したい場面 4I Composition APIでPub/Subしてみた場Â ÄI まとめ 4. Vuex / PiniaでやるべきかP
11. Vuex / Piniaでやるべきか？ いきなり結論 Vuex / PiniaをComposition APIで
 代替実装可能なので不要！ ※導入するのは簡単だが、剥がすのは かなりエネルギーが必要なので入れなくて済むなら 入れないほうが長期的に見た際に吉というのが所感
12. 目次 @G Pub/Sub概要 2. 状態どこで持つか問 G Pub/Subで状態管理したい場面 4. Vuex / Piniaでやるべきか？ 6. まとめ 5. Composition APIでPub/Subしてみた場合
13. Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードはこちら https://github.com/Shigeyuki-fukuda/nuxt-pub-sub-sample
14. Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
15. Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
16. Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
17. Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
18. Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
19. Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
20. Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
21. Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
22. Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
23. Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
24. Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
25. Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
26. Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
27. Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
28. Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
29. Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
30. Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
31. Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
32. Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
33. Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
34. Composition APIでPub/Subしてみた場合 今回の発表のComposition APIのPub / Subサンプルコードの概要
35. Composition APIでPub/Subしてみた場合 ※時間があったら... 今回のサンプルコードを使ったデモアプリを動かしてみる https://vue-fes-japan-2023-pub-sub-demo.netlify.app
36. 目次 QU Pub/Sub概要 2. 状態どこで持つか問& #U Pub/Subで状態管理したい場面 4. Vuex / Piniaでやるべきか？ 5. Composition APIでPub/Subしてみた場合 6. まとめ
37. まとめ ・Composition APIをPub/Subパターンで実装することで 　モーダルの開閉をVuex / Piniaを使わず実装出来た ・今回のパターン以外でもネストしてるコンポーネントから 　親コンポーネントの状態を更新する際にPub/Subパターン 　が便利なのでオススメ