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.3k
Piniaの現状と今後
Vue Fes Japan 2024のスペシャルランチセッションの内容です。
waka292
October 23, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
320
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
21
4.4k
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
300
Datadog Workflow Automation で圧倒的価値提供
showwin
1
330
Devin入門 〜月500ドルから始まるAIチームメイトとの開発生活〜 / Introduction Devin 〜Development With AI Teammates〜
rkaga
3
1.4k
オレを救った Cline を紹介する
codehex
16
15k
Jakarta EE meets AI
ivargrimstad
0
810
SwiftUI移行のためのインプレッショントラッキング基盤の構築
kokihirokawa
0
190
はじめてのIssueOps - GitHub Actionsで実現するコメント駆動オペレーション
tmknom
5
1.5k
Ça bouge du côté des animations CSS !
goetter
2
170
Jakarta EE meets AI
ivargrimstad
0
840
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
1
260
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
11
1.3k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Optimizing for Happiness
mojombo
377
70k
Into the Great Unknown - MozCon
thekraken
35
1.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
660
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Agile that works and the tools we love
rasmusluckow
328
21k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
390
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. 完 ご清聴ありがとうございました ソーシャルデータバンクは エンジニアを募集しています!