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.7k
Piniaの現状と今後
Vue Fes Japan 2024のスペシャルランチセッションの内容です。
waka292
October 23, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
240
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.4k
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
810
時間軸から考えるTerraformを使う理由と留意点
fufuhu
12
4k
個人軟體時代
ethanhuang13
0
300
OSS開発者という働き方
andpad
5
1.7k
Swift Updates - Learn Languages 2025
koher
1
400
rage against annotate_predecessor
junk0612
0
160
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
380
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
170
TanStack DB ~状態管理の新しい考え方~
bmthd
2
450
RDoc meets YARD
okuramasafumi
4
160
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
111
20k
What's in a price? How to price your products and services
michaelherold
246
12k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
How to Ace a Technical Interview
jacobian
279
23k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
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. 完 ご清聴ありがとうございました ソーシャルデータバンクは エンジニアを募集しています!