pinia
PiniaでVueストアを定義する
Vueアプリケーションの構築には、コンポーネント間での予測可能な状態管理が求められます。Piniaは、状態、ゲッター、アクションを備えたタイプセーフで直感的なAPIを提供します。このスキルは、スケーラブルなVue状態管理パターンの構築に関する包括的なリファレンスを提供します。
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "pinia". How do I persist Pinia state to localStorage?
Résultat attendu:
- Piniaプラグインを使用して状態をlocalStorageと同期させます：
- ```ts
- import { defineStore } from 'pinia'
- import { watch } from 'vue'
- export const useCounterStore = defineStore('counter', {
- state: () => ({ count: 0, name: 'Eduardo' }),
- })
- // Watch for changes and persist to localStorage
- watch(
- useCounterStore(),
- (state) => {
- localStorage.setItem('counter', JSON.stringify(state))
- },
- { deep: true }
- )
- ```
Utilisation de "pinia". What is the difference between Option Stores and Setup Stores?
Résultat attendu:
- **Option Stores**は、state、getters、actionsなどのプロパティを持つオブジェクトを使用します：
- ```ts
- export const useCounterStore = defineStore('counter', {
- state: () => ({ count: 0 }),
- getters: { doubleCount: (state) => state.count * 2 },
- actions: { increment() { this.count++ } }
- })
- ```
- **Setup Stores**は、refsと関数を返す関数構文を使用します：
- ```ts
- export const useCounterStore = defineStore('counter', () => {
- const count = ref(0)
- const doubleCount = computed(() => count.value * 2)
- function increment() { count.value++ }
- return { count, doubleCount, increment }
- })
- ```
Utilisation de "pinia". How do I reset all stores in tests?
Résultat attendu:
- beforeEachでsetActivePiniaとcreatePiniaを使用します：
- ```ts
- import { setActivePinia, createPinia } from 'pinia'
- beforeEach(() => {
- const pinia = createPinia()
- setActivePinia(pinia)
- })
- it('resets state', () => {
- const store = useCounterStore()
- store.count = 5
- // Reset for next test
- store.$reset()
- expect(store.count).toBe(0)
- })
- ```
Audit de sécurité
SûrAll 292 static findings are false positives. This skill contains only markdown documentation with code examples for Pinia (official Vue state management library). No executable code, network operations, file system access, or command execution. Scanner misinterpreted markdown code blocks as shell commands and function names like defineStore as cryptographic functions.
Score de qualité
Ce que vous pouvez construire
ユーザー認証ストアの構築
Vueアプリケーション間でユーザーセッション、認証状態、権限を管理するためのPiniaストアを作成します。
カートとチェックアウトフローの実装
ショッピングカートの状態、商品カタログ、注文処理を含むeコマース機能のストアを設計します。
共有UI状態ライブラリの作成
テーマ管理、モーダルダイアログ、通知システム用の再利用可能なPiniaプラグインとコンポーザブルストアを開発します。
Essayez ces prompts
テーマや言語設定などのユーザー設定を管理するためのPiniaストアを定義するにはどうすればよいですか？Options APIとComposition APIの両方のアプローチを示してください。
小計、税金、合計を計算するためにゲッターを使用するショッピングカート用のPiniaストアを作成してください。これらの計算値にコンポーネントからアクセスする方法も示してください。
アクション、ペイロード、戻り値の適切なTypeScript型指定で非同期API呼び出しを処理するためのPiniaストアを作成してください。エラーハンドリングパターンを含めてください。
複数のPiniaストアをどのように組み合わせればよいですか？authストアがユーザー情報を提供し、cartストアがその情報をパーソナライゼーションに使用するパターンを示してください。
Bonnes pratiques
- 複雑なロジックでコンポーザブル、ウォッチャー、高度なTypeScriptパターンを使用する場合はセットアップストアを使用する
- Piniaが適切にリアクティビティを追跡できるように、セットアップストアからすべての状態プロパティを返す
- 状態やゲッターを分割代入する場合はstoreToRefs()を使用してリアクティビティを保持する
Éviter
- storeToRefs()を使用せずに直接状態を分割代入する（リアクティビティが壊れる）
- モジュールのスコープでではなく関数内でストアを呼び出す（SSR問題を引き起こす）
- 状態にコンポーネントやシリアライズ不可能なオブジェクトを保存する（水和を防止）
Foire aux questions
Piniaとは何ですか？なぜ使用するべきですか？
PiniaはVuexとどのように異なりますか？
PiniaをOptions APIおよびComposition APIで使用できますか？
Piniaストアをテストするにはどうすればよいですか？
Piniaの状態をページリロード間で永続化するにはどうすればよいですか？
Détails du développeur
Structure de fichiers