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
AIコーディングAgentとの向き合い方
eycjur
0
270
Navigating Dependency Injection with Metro
zacsweers
3
1k
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
530
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
600
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
250
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
Testing Trophyは叫ばない
toms74209200
0
880
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
為你自己學 Python - 冷知識篇
eddie
1
350
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
490
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
390
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Code Review Best Practice
trishagee
70
19k
RailsConf 2023
tenderlove
30
1.2k
Optimizing for Happiness
mojombo
379
70k
Rails Girls Zürich Keynote
gr2m
95
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Why Our Code Smells
bkeepers
PRO
339
57k
Embracing the Ebb and Flow
colly
87
4.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Writing Fast Ruby
sferik
628
62k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
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. 完 ご清聴ありがとうございました ソーシャルデータバンクは エンジニアを募集しています!