Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Piniaの現状と今後
Search
waka292
October 23, 2024
Programming
5
1.8k
Piniaの現状と今後
Vue Fes Japan 2024のスペシャルランチセッションの内容です。
waka292
October 23, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
距離関数を極める! / SESSIONS 2024
gam0022
0
370
たのしいparse.y
ydah
2
110
テスト自動化失敗から再挑戦しチームにオーナーシップを委譲した話/STAC2024 macho
ma_cho29
0
420
layerx_20241129.pdf
kyoheig3
2
250
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
150
CSC305 Lecture 23
javiergs
PRO
0
120
ソフトウェアの振る舞いに着目し 複雑な要件の開発に立ち向かう
rickyban
0
660
新規学習のハードルを下げる方法とは?/ How to Make Learning Something New Easier?
nobuoooo
1
130
Missing parts when designing and implementing Android UI
ericksli
0
390
カンファレンスの「アレ」Webでなんとかしませんか? / Conference “thing” Why don't you do something about it on the Web?
dero1to
2
160
as(型アサーション)を書く前にできること
marokanatani
11
3k
HTTP compression in PHP and Symfony apps
dunglas
2
1.2k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
136
6.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
12
Building Flexible Design Systems
yeseniaperezcruz
327
38k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Designing for humans not robots
tammielis
250
25k
Automating Front-end Workflow
addyosmani
1366
200k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
27
2.1k
Rails Girls Zürich Keynote
gr2m
94
13k
Done Done
chrislema
181
16k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
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. 完 ご清聴ありがとうございました ソーシャルデータバンクは エンジニアを募集しています!