Pinia คือไลบรารีจัดการสถานะอย่างเป็นทางการของ Vue (สืบทอดมาจาก Vuex) — store ที่รวมศูนย์สำหรับสถานะที่ต้องแบ่งปันระหว่างหลายคอมโพเนนต์ พร้อม API ที่เรียบง่ายและปลอดภัยในด้านประเภท ที่สร้างขึ้นจาก Composition API
{ defineStore } ;
{ ref, computed } ;
useCounterStore = (, {
count = ();
double = ( count. * );
() { count.++; }
() { count. = api.(); }
{ count, double, increment, fetchInitial };
});
"setup store" นี้ดูเหมือน composable ทุกประการ — ref สำหรับสถานะ computed สำหรับ getters ฟังก์ชันสำหรับ actions — ซึ่งจะเข้าใจง่ายหากคุณรู้ Composition API
<script setup>
import { useCounterStore } from "@/stores/counter";
import { storeToRefs } from "pinia";
const store = useCounterStore();
const { count, double } = storeToRefs(store); // keep state reactive when destructured
const { increment } = store; // actions can be destructured directly
</script>
<template>
<button @click="increment">{{ count }} (x2 = {{ double }})</button>
</template>
สำคัญ: ใช้ storeToRefs เมื่อเอาออกโครงสร้าง สถานะ/getters — การเอาออกโครงสร้างแบบธรรมดาจะทำลายความเป็นปฏิกิริยา (คำเตือนความเป็นปฏิกิริยาเดียวกับ reactive) Actions ไม่ต้องการสิ่งนี้
✓ No mutations boilerplate — actions can mutate state directly
✓ Excellent TypeScript inference (Vuex was painful to type)
✓ Modular by design — many small stores, no nested-module complexity
✓ Composition-API-native, tiny API, devtools support
props/emits → parent ↔ child
provide/inject → share within a subtree
Pinia store → GLOBAL/app-wide shared state (auth user, cart, settings)
accessed by many unrelated components
Pinia คือโซลูชันมาตรฐานสำหรับ สถานะทั่วโลกที่แบ่งปัน ในแอปพลิเคชัน Vue — ผู้ใช้/การตรวจสอบสิทธิ์ รถเข็นช้อปปิง การตั้งค่าแอป ข้อมูลแคช — สิ่งใดก็ตามที่คอมโพเนนต์ที่ห่างไกลจำนวนมากต้องอ่านและอัปเดตอย่างสอดคล้องกัน
API ที่เป็นสไตล์ composable การสนับสนุน TypeScript ระดับสูง และการขาดจากไฟล์เบื้องต้นของ Vuex ทำให้เป็นตัวเลือกที่แนะนำ
การรู้เมื่อใดที่ควรใช้มันอย่างแยกส่วน (เทียบกับ props/inject) เมื่อสถานะเป็นสถานะทั่วโลกจริง ๆ และการใช้ storeToRefs เพื่อรักษาความเป็นปฏิกิริยาในการเอาออกโครงสร้าง คือหัวใจของการใช้มันอย่างถูกต้อง