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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

まとめ ・Composition APIをPub/Subパターンで実装することで  モーダルの開閉をVuex / Piniaを使わず実装出来た ・今回のパターン以外でもネストしてるコンポーネントから  親コンポーネントの状態を更新する際にPub/Subパターン  が便利なのでオススメ