Piniaの現状と今後

by waka292

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

10 ©2024 Social Databank, Inc. 下記の特徴を持つ、Vue公式推薦の状態管理ライブラリ ● 💡 Intuitive ● 🔑 Type Safe ● ⚙ Devtools support ● 🔌 Extensible ● 🏗 Modular by design ● 📦 Extremely light Pinia🍍とは https://github.com/vuejs/pinia?tab=readme-ov-ﬁle#pinia

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

30 ©2024 Social Databank, Inc. createSetupStoreの流れ 1. 内部状態の初期化(scope や isListening などの内部変数を初期化し、ストア内の状態変更やアクションに関連するリスナーを管理します。) 2. $patchを定義($patch 関数は、状態を変更するためのメソッドです。オブジェクト全体を部分的にマージしたり、関数を使って状態を更新できます。この変更は、定義された購読リスナーに通知されます。) 3. $disposeを定義(このStoreのscopeを停止し、このStoreに関するsubscriptionを停止、Store自体をPinia のStoreから削除する) 4. $resetを定義(ただし、Setup Store且つ開発用ビルドならばエラーをだし、SetupStore且つ本番用ビルドなら何もしない) 5. アクションの定義(action 関数は、ストア内で定義されたアクションをラップし、実行時にそのアクションが呼び出されたことを追跡できるようにしています。 $onAction メソッドを通じて、アクションが実行された際にフックを追加できるようにします。) 6. createPiniaで呼んだEﬀectScopeを用いて、開発者がdeﬁneStoreで渡した関数の中身をキャプチャーする 7. Pinia内部のStoreに保存する 8. 1-6の内容をオブジェクトにまとめて、オブジェクトにして返す