Piniaの現状と今後

Vue Fes Japan 2024のスペシャルランチセッションの内容です。

Transcript

1. ©2024 Social Databank, Inc. Piniaの現状と今後 ソーシャルデータバンク株式会社 若原 緑
2. 2 ©2024 Social Databank, Inc. 名前 • 若原 緑 趣味 • ポメラニアンと散歩 自己紹介
3. ©2024 Social Databank, Inc. 00 会社紹介
4. ©2024 Social Databank, Inc.
5. ©2024 Social Databank, Inc. 01 Piniaの紹介
6. ©2024 Social Databank, Inc. ？
7. ©2024 Social Databank, Inc.
8. ©2024 Social Databank, Inc.
9. 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-file#pinia
10. 11 ©2024 Social Databank, Inc. • Piniaの状態がDevtoolsで見れる • 状態をJSONで読み書きができる ⚙ Devtools supportとは
11. 12 ©2024 Social Databank, Inc. ⚙ Nuxt上のDevtools support
12. 13 ©2024 Social Databank, Inc. • ストアに新しいプロパティや関数を追加する • 「自動的にLocal Storageに同期する」のような 副作用を追加できる https://pinia.vuejs.org/core-concepts/plugins.html • 例 ◦ pinia-orm ◦ persistedstate 🔌 Extensibleとは
13. ©2024 Social Databank, Inc. 02 Piniaの使い方
14. 15 ©2024 Social Databank, Inc. ① 導入
15. ©2024 Social Databank, Inc. 16 Setup Store • 型安全 • injectやwatchを使 える • 柔軟にコードがかけ る Options Store 2種類のStore • 型安全
16. 17 ©2024 Social Databank, Inc. ② ストアの定義 (Setup Store)
17. 18 ©2024 Social Databank, Inc. ②′ ストアの定義 (Options Store)
18. 19 ©2024 Social Databank, Inc. ③ 利用
19. ©2024 Social Databank, Inc. 03 Piniaの中の実装
20. 21 ©2024 Social Databank, Inc. Piniaを構成するVueの要素 Provide / Inject effectScope
21. 22 ©2024 Social Databank, Inc. Provide / Inject とは? Provide / Inject https://ja.vuejs.org/guide/components/provide-inject どこでも状態の受け渡しができます 受け渡しをアプリケーション全体か、子 孫コンポーネント限定に設定できます
22. 23 ©2024 Social Databank, Inc. これだけでいいのでは？ Provide / Inject https://ja.vuejs.org/guide/components/provide-inject そんなことない！ provide / injectでは、computedや watchができないです！
23. 24 ©2024 Social Databank, Inc. 通常Vueが自動的に作成し、破棄する watchやcomputedのスコープを、 自分で制御するための関数です effectScopeとは? effectScope https://vuejs.org/api/reactivity-advanced.html#effectscope
24. 25 ©2024 Social Databank, Inc. 1. effectScope()でスコープオブジェクトを作成 2. 開発者が作成したStoreを保存するオブジェクト を作成 3. 1,2をアプリケーションレベルでprovide ざっくりcreatePinia
25. ©2024 Social Databank, Inc.
26. 27 ©2024 Social Databank, Inc. • 初期化の場合、 1. Storeの中身はeffectScopeで囲う 2. Piniaのオブジェクトをinjectし、Storeを保存 3. Storeの内容を返す • 初期化ではない場合、 1. Piniaのオブジェクトをinjectし、Storeを取り 出し内容を返す ざっくりdefineStore
27. ©2024 Social Databank, Inc.
28. ©2024 Social Databank, Inc.
29. 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で呼んだEffectScopeを用いて、開発者がdefineStoreで渡した関数の中身をキャプチャーす る 7. Pinia内部のStoreに保存する 8. 1-6の内容をオブジェクトにまとめて、オブジェクトにして返す
30. ©2024 Social Databank, Inc.
31. ©2024 Social Databank, Inc. 作者謹製の学習コンテンツ https://masteringpinia.com/
32. ©2024 Social Databank, Inc. 04 Piniaを使用する上での注意点
33. 34 ©2024 Social Databank, Inc. • stateの直接のgetterは不要 • stateは必ず公開 • $resetはOptions Storeのみ • 分割代入に注意 Piniaを使用する上での注意点
34. 35 ©2024 Social Databank, Inc. 󰢄 NOT GOOD 󰢄 ① stateの直接のgetterは不要
35. 36 ©2024 Social Databank, Inc. 󰢐 GOOD 󰢐 ① stateの直接のgetterは不要
36. 37 ©2024 Social Databank, Inc. 󰢄 BAD 󰢄 ② stateは必ず公開
37. 38 ©2024 Social Databank, Inc. DevToolsのstateに表示されず、gettersも上の リロードボタンを押さないと最新の値にならない ② stateは必ず公開
38. 39 ©2024 Social Databank, Inc. 隠したいstate等はStoreをネストさせる ② stateは必ず公開
39. 40 ©2024 Social Databank, Inc. ⚠ ATTENTION ⚠ ③ $resetはOptions Storeのみ Options Storeでしか使えません
40. 41 ©2024 Social Databank, Inc. ③ $resetはOptions Storeのみ 🤔 自分で作成する 🤔
41. 42 ©2024 Social Databank, Inc. 󰢄 BAD 󰢄 ④ 分割代入に注意
42. 43 ©2024 Social Databank, Inc. 󰢐 GOOD① 󰢐 ④ 分割代入に注意
43. 44 ©2024 Social Databank, Inc. 󰢐 GOOD② 󰢐 ④ 分割代入に注意
44. 45 ©2024 Social Databank, Inc. 󰢐 EXCELLENT!? 󰢐 ④ 分割代入に注意 https://zenn.dev/ytr0903/articles/18fe28b963a07c
45. ©2024 Social Databank, Inc. 05 今後
46. ©2024 Social Databank, Inc.
47. 48 ©2024 Social Databank, Inc. フレキシブルにデータを取得して キャッシュしてくれる素敵なライブラリーです https://github.com/posva/pinia-colada https://uvr.esm.is/data-loaders/colada/ Pinia-collada
48. ©2024 Social Databank, Inc. 完 ご清聴ありがとうございました ソーシャルデータバンクは エンジニアを募集しています！