Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Piniaの現状と今後

waka292
October 23, 2024

 Piniaの現状と今後

Vue Fes Japan 2024のスペシャルランチセッションの内容です。

waka292

October 23, 2024
Tweet

Other Decks in Programming

Transcript

  1. 2 ©2024 Social Databank, Inc. 名前 • 若原 緑 趣味

    • ポメラニアンと散歩 自己紹介
  2. 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
  3. 13 ©2024 Social Databank, Inc. • ストアに新しいプロパティや関数を追加する • 「自動的にLocal Storageに同期する」のような

    副作用を追加できる https://pinia.vuejs.org/core-concepts/plugins.html • 例 ◦ pinia-orm ◦ persistedstate 🔌 Extensibleとは
  4. ©2024 Social Databank, Inc. 16 Setup Store • 型安全 •

    injectやwatchを使 える • 柔軟にコードがかけ る Options Store 2種類のStore • 型安全
  5. 22 ©2024 Social Databank, Inc. Provide / Inject とは? Provide

    / Inject https://ja.vuejs.org/guide/components/provide-inject どこでも状態の受け渡しができます 受け渡しをアプリケーション全体か、子 孫コンポーネント限定に設定できます
  6. 23 ©2024 Social Databank, Inc. これだけでいいのでは? Provide / Inject https://ja.vuejs.org/guide/components/provide-inject

    そんなことない! provide / injectでは、computedや watchができないです!
  7. 27 ©2024 Social Databank, Inc. • 初期化の場合、 1. Storeの中身はeffectScopeで囲う 2.

    Piniaのオブジェクトをinjectし、Storeを保存 3. Storeの内容を返す • 初期化ではない場合、 1. Piniaのオブジェクトをinjectし、Storeを取り 出し内容を返す ざっくりdefineStore
  8. 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の内容をオブジェクトにまとめて、オブジェクトにして返す
  9. 34 ©2024 Social Databank, Inc. • stateの直接のgetterは不要 • stateは必ず公開 •

    $resetはOptions Storeのみ • 分割代入に注意 Piniaを使用する上での注意点
  10. 40 ©2024 Social Databank, Inc. ⚠ ATTENTION ⚠ ③ $resetはOptions

    Storeのみ Options Storeでしか使えません