# Pinia

> แนวทางการพัฒนา Pinia ตาม best practices สำหรับ Vue 3 state management ที่มี type-safe, devtools...

- Skill: `newkub/pinia` (Agent Skill, multi-file: 13 files)
- Install (CLI): `npx skillmds@latest add newkub/pinia`
- Raw SKILL.md: https://api.skillmd.com/api/skills/newkub/pinia/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: newkub (https://skillmd.com/u/newkub)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/newkub/pinia

---

## Goal

ใช้ Pinia สำหรับ Vue 3 state management ที่ type-safe, integrate กับ devtools, และรองรับทั้ง Options API และ Composition API


## Scope

ใช้สำหรับ state management ใน Vue 3 applications ด้วย Pinia


## Execute

- ติดตั้ง Pinia ด้วย `bun add pinia`
- อ่าน `guide/installation.md` สำหรับการติดตั้งและ setup
- อ่าน `guide/quick-start.md` สำหรับเริ่มต้นใช้งาน
- อ่าน `guide/key-concept.md` สำหรับแนวคิดหลัก
- อ่าน `guide/how-it-works.md` สำหรับวิธีการทำงาน
- อ่าน `key-concepts/` สำหรับแนวคิดเฉพาะทาง
- อ่าน `guide/configuration.md` สำหรับการตั้งค่า
- อ่าน `references/configuration.md` สำหรับ configuration reference
- ตั้งค่า Pinia และ stores
- อ่าน `guide/features.md` สำหรับ features ที่มี
- อ่าน `guide/patterns.md` สำหรับ patterns ทั่วไป
- ใช้ Options Store หรือ Setup Store
- อ่าน `guide/best-practices.md` สำหรับ best practices
- ใช้ state, getters, actions อย่างเหมาะสม
- ใช้ plugins สำหรับ extend functionality
- อ่าน `guide/integration.md` สำหรับ Vue integration
- อ่าน `guide/architecture.md` สำหรับ system architecture
- อ่าน `guide/structure.md` สำหรับ project structure
- อ่าน `guide/troubleshooting.md` สำหรับปัญหาทั่วไป
- อ่าน `references/api.md` สำหรับ API reference


## Rules

- ใช้ `bun add pinia` สำหรับ installation
- ใช้ `createPinia()` สำหรับ setup
- ใช้ Vue 3 เสมอ
- ใช้ backticks สำหรับ `defineStore()`, `useStore()`, commands
- ใช้ code blocks สำหรับ store examples
- ใช้ ansi markdown diagrams สำหรับ flow และ architecture
- ใช้ TypeScript สำหรับ type-safe stores
- ใช้ `storeToRefs()` สำหรับ maintain reactivity
- ใช้ proper typing สำหรับ state, getters, actions
- ใช้ computed getters สำหรับ derived state
- หลีกเลี่ยง unnecessary reactivity
- ใช้ plugins อย่างเหมาะสม


## Expected Outcome

- State management ที่ type-safe และ maintainable
- Stores ที่ well-organized และ scalable
- Integration ที่ smooth กับ Vue 3 ecosystem
- Devtools integration ที่ seamless