pinia-best-practices

Fix TypeScript typing issues in Pinia stores for Vue 3 applications.

1|Updated Jul 30, 2023
One-click install
npx skills add https://github.com/DanielShuguang/tool-box --skill pinia-best-practices-danielshuguang
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pinia-best-practices
Source: https://github.com/DanielShuguang/tool-box/tree/main/.trae/skills/pinia-best-practices
Command: npx skills add https://github.com/DanielShuguang/tool-box --skill pinia-best-practices-danielshuguang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and scripts (resource) components.

What problem does it solve?

This Skill addresses common TypeScript configuration and typing issues encountered when working with Pinia stores in Vue 3 applications, ensuring type safety and preventing common errors.

Core Features & Use Cases

  • storeToRefs Type Loss: Fixes incorrect nested ref types with Vue 3.5+.
  • Getter Circular References: Resolves TypeScript any or circular errors in getters using this.
  • Setup Store Patterns: Guides on implementing type-safe store patterns.
  • Use Case: Debugging type errors when using storeToRefs or resolving unexpected any types in your Pinia getters.

Quick Start

Use the pinia-best-practices skill to fix storeToRefs type loss issues.

Frequently Asked Questions about pinia-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix storeToRefs type loss in Vue 3.5 Pinia stores?

To fix storeToRefs type loss in Vue 3.5 Pinia stores, you must resolve incorrect nested ref types by adjusting your TypeScript configuration. This ensures robust type safety and correct inference for your Pinia state.

Why does my Pinia getter using `this` return an `any` type or circular error?

Pinia getters using `this` return `any` or circular errors due to TypeScript inference issues. Resolving these TypeScript configuration and typing issues prevents the circular references and restores proper type safety.

How do I implement type-safe Setup Store patterns in Vue 3 Pinia?

To implement type-safe Setup Store patterns in Vue 3 Pinia, apply specific TypeScript configurations that address state and getter typing issues. This ensures correct type inference across your store logic.

Does this Pinia type safety solution work for Vue 3 applications?

Yes, this solution explicitly resolves TypeScript configuration and typing issues within Pinia stores specifically for Vue 3 applications, ensuring robust type safety and correct inference.

What is the best way to resolve unexpected `any` types in Pinia getters?

The best way to resolve unexpected `any` types in Pinia getters is to fix TypeScript inference errors caused by using `this`. Addressing these circular references ensures robust type safety.