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

Transcript

Composition API時代の

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

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

U GitHub：@Shigeyuki-fukud6
U X(旧Twitter)：@fuqda90

About me

View Slide

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

View Slide

目次
Å Pub/Sub概要

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

View Slide

Pub/Sub概要
Pub/Sub
Publisher（イベント発行者）が発行したイベントをEvent Broker（イベント仲介者）がルーティングして、

Subscriber（イベント購読者）に伝達するイベント駆動型アーキテクチャのデザインパターンのこと。
イベントA
Publisher
(イベント発行者)
イベントB
イベントC
イベントA
Event Broker
(イベント仲介者)
Subscriber
(イベント購読者)
イベントB
イベントC

View Slide

目次
HR Pub/Sub概要

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

View Slide

状態どこで持つか問題
原則、stateは親コンポーネントに寄せる
・基本的にバックエンド側と送受信する項目は、 
　親(/pages)コンポーネントのみ持つことを許可。
 
・子(/pagesを構成するパーツ)コンポーネントには、

　状態を持たない方がシンプルになる
・親や子にstateが点在すると保守性が悪化するので、

　例外は許容しつつ基本は避けること
/pages配下のコンポーネント
コンテナコンポーネント
各種フォーム用コンポーネント
〇〇連携〇〇を連携解除
〇〇設定

View Slide

目次
IT Pub/Sub概要

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

View Slide

Pub/Subで状態管理したい場面
コンポーネントがネストしている中で

子コンポーネントの

UI操作をトリガーに

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

View Slide

目次
DI Pub/Sub概要

2. 状態どこで持つか問"
I Pub/Subで状態管理したい場面

4I Composition APIでPub/Subしてみた場Â
ÄI まとめ
4. Vuex / PiniaでやるべきかP

View Slide

Vuex / Piniaでやるべきか？
いきなり結論
Vuex / PiniaをComposition APIで 
代替実装可能なので不要！

※導入するのは簡単だが、剥がすのは

かなりエネルギーが必要なので入れなくて済むなら

入れないほうが長期的に見た際に吉というのが所感

View Slide

目次
@G Pub/Sub概要

2. 状態どこで持つか問
G Pub/Subで状態管理したい場面

4. Vuex / Piniaでやるべきか？

6. まとめ
5. Composition APIでPub/Subしてみた場合

View Slide

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

View Slide

今回の発表のComposition APIのPub / Subサンプルコードの概要

View Slide

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

View Slide

目次
QU Pub/Sub概要

2. 状態どこで持つか問&
#U Pub/Subで状態管理したい場面

4. Vuex / Piniaでやるべきか？

5. Composition APIでPub/Subしてみた場合

6. まとめ

View Slide

まとめ
・Composition APIをPub/Subパターンで実装することで

　モーダルの開閉をVuex / Piniaを使わず実装出来た
・今回のパターン以外でもネストしてるコンポーネントから

　親コンポーネントの状態を更新する際にPub/Subパターン

　が便利なのでオススメ

View Slide

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

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

fuqda

More Decks by fuqda

Other Decks in Programming

Featured

Transcript