Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Piniaの現状と今後
Search
waka292
October 23, 2024
Programming
5
2.5k
Piniaの現状と今後
Vue Fes Japan 2024のスペシャルランチセッションの内容です。
waka292
October 23, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
230
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
320
5つのアンチパターンから学ぶLT設計
narihara
1
110
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.9k
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
320
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
260
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
240
A2A プロトコルを試してみる
azukiazusa1
2
1.2k
Featured
See All Featured
BBQ
matthewcrist
89
9.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Done Done
chrislema
184
16k
Automating Front-end Workflow
addyosmani
1370
200k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Unsuck your backbone
ammeep
671
58k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Transcript
©2024 Social Databank, Inc. Piniaの現状と今後 ソーシャルデータバンク株式会社 若原 緑
2 ©2024 Social Databank, Inc. 名前 • 若原 緑 趣味
• ポメラニアンと散歩 自己紹介
©2024 Social Databank, Inc. 00 会社紹介
©2024 Social Databank, Inc.
©2024 Social Databank, Inc. 01 Piniaの紹介
©2024 Social Databank, Inc. ?
©2024 Social Databank, Inc.
©2024 Social Databank, Inc.
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
11 ©2024 Social Databank, Inc. • Piniaの状態がDevtoolsで見れる • 状態をJSONで読み書きができる ⚙
Devtools supportとは
12 ©2024 Social Databank, Inc. ⚙ Nuxt上のDevtools support
13 ©2024 Social Databank, Inc. • ストアに新しいプロパティや関数を追加する • 「自動的にLocal Storageに同期する」のような
副作用を追加できる https://pinia.vuejs.org/core-concepts/plugins.html • 例 ◦ pinia-orm ◦ persistedstate 🔌 Extensibleとは
©2024 Social Databank, Inc. 02 Piniaの使い方
15 ©2024 Social Databank, Inc. ① 導入
©2024 Social Databank, Inc. 16 Setup Store • 型安全 •
injectやwatchを使 える • 柔軟にコードがかけ る Options Store 2種類のStore • 型安全
17 ©2024 Social Databank, Inc. ② ストアの定義 (Setup Store)
18 ©2024 Social Databank, Inc. ②′ ストアの定義 (Options Store)
19 ©2024 Social Databank, Inc. ③ 利用
©2024 Social Databank, Inc. 03 Piniaの中の実装
21 ©2024 Social Databank, Inc. Piniaを構成するVueの要素 Provide / Inject effectScope
22 ©2024 Social Databank, Inc. Provide / Inject とは? Provide
/ Inject https://ja.vuejs.org/guide/components/provide-inject どこでも状態の受け渡しができます 受け渡しをアプリケーション全体か、子 孫コンポーネント限定に設定できます
23 ©2024 Social Databank, Inc. これだけでいいのでは? Provide / Inject https://ja.vuejs.org/guide/components/provide-inject
そんなことない! provide / injectでは、computedや watchができないです!
24 ©2024 Social Databank, Inc. 通常Vueが自動的に作成し、破棄する watchやcomputedのスコープを、 自分で制御するための関数です effectScopeとは? effectScope
https://vuejs.org/api/reactivity-advanced.html#effectscope
25 ©2024 Social Databank, Inc. 1. effectScope()でスコープオブジェクトを作成 2. 開発者が作成したStoreを保存するオブジェクト を作成
3. 1,2をアプリケーションレベルでprovide ざっくりcreatePinia
©2024 Social Databank, Inc.
27 ©2024 Social Databank, Inc. • 初期化の場合、 1. Storeの中身はeffectScopeで囲う 2.
Piniaのオブジェクトをinjectし、Storeを保存 3. Storeの内容を返す • 初期化ではない場合、 1. Piniaのオブジェクトをinjectし、Storeを取り 出し内容を返す ざっくりdefineStore
©2024 Social Databank, Inc.
©2024 Social Databank, Inc.
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の内容をオブジェクトにまとめて、オブジェクトにして返す
©2024 Social Databank, Inc.
©2024 Social Databank, Inc. 作者謹製の学習コンテンツ https://masteringpinia.com/
©2024 Social Databank, Inc. 04 Piniaを使用する上での注意点
34 ©2024 Social Databank, Inc. • stateの直接のgetterは不要 • stateは必ず公開 •
$resetはOptions Storeのみ • 分割代入に注意 Piniaを使用する上での注意点
35 ©2024 Social Databank, Inc. NOT GOOD ①
stateの直接のgetterは不要
36 ©2024 Social Databank, Inc. GOOD ① stateの直接のgetterは不要
37 ©2024 Social Databank, Inc. BAD ② stateは必ず公開
38 ©2024 Social Databank, Inc. DevToolsのstateに表示されず、gettersも上の リロードボタンを押さないと最新の値にならない ② stateは必ず公開
39 ©2024 Social Databank, Inc. 隠したいstate等はStoreをネストさせる ② stateは必ず公開
40 ©2024 Social Databank, Inc. ⚠ ATTENTION ⚠ ③ $resetはOptions
Storeのみ Options Storeでしか使えません
41 ©2024 Social Databank, Inc. ③ $resetはOptions Storeのみ 🤔 自分で作成する
🤔
42 ©2024 Social Databank, Inc. BAD ④ 分割代入に注意
43 ©2024 Social Databank, Inc. GOOD① ④ 分割代入に注意
44 ©2024 Social Databank, Inc. GOOD② ④ 分割代入に注意
45 ©2024 Social Databank, Inc. EXCELLENT!? ④ 分割代入に注意
https://zenn.dev/ytr0903/articles/18fe28b963a07c
©2024 Social Databank, Inc. 05 今後
©2024 Social Databank, Inc.
48 ©2024 Social Databank, Inc. フレキシブルにデータを取得して キャッシュしてくれる素敵なライブラリーです https://github.com/posva/pinia-colada https://uvr.esm.is/data-loaders/colada/ Pinia-collada
©2024 Social Databank, Inc. 完 ご清聴ありがとうございました ソーシャルデータバンクは エンジニアを募集しています!