Frontend Academy · บทเรียน

Pinia สำหรับ Vue: defineStore และ storeToRefs

กำหนดคลังสถานะ Pinia ด้วย defineStore เข้าถึงในคอมโพเนนต์ และใช้ storeToRefs เพื่อคงการตอบสนองเมื่อแยกโครงสร้างสถานะ

บทเรียน 3 จาก 413 ขั้นตอน

Pinia สำหรับ Vue: defineStore และ storeToRefs เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

Pinia คืออะไร

Pinia เป็นไลบรารีจัดการสถานะอย่างเป็นทางการสำหรับ Vue 3 และมาแทน Vuex ด้วย API ที่เรียบง่าย ปลอดภัยด้านชนิดข้อมูล ผสานรวมกับ DevTools และให้ความรู้สึกคล้าย Composition API

การติดตั้ง Pinia

ติดตั้งและลงทะเบียนปลั๊กอิน Pinia กับ app ของ Vue

npm install pinia

// main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
app.use(createPinia());
app.mount('#app');

defineStore — รูปแบบ Composition API

defineStore สร้าง store รูปแบบ Composition API ใช้ ref, computed และฟังก์ชันต่าง ๆ โดยตรง เช่นเดียวกับคอมโพสิเบิล

// stores/counter.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);
  const doubled = computed(() => count.value * 2);
  function increment() { count.value++; }
  return { count, doubled, increment };
});

defineStore — รูปแบบ Options

รูปแบบ Options สอดคล้องกับ Options API ของ Vue ได้แก่ state() สำหรับข้อมูลแบบตอบสนองต่อการเปลี่ยนแปลง getters ซึ่งคล้าย computed และ actions ซึ่งคล้าย methods

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    doubled: (state) => state.count * 2,
  },
  actions: {
    increment() { this.count++; },
    async fetchAndSet(id: string) {
      this.count = await fetchCount(id);
    }
  }
});

การใช้ Store ในคอมโพเนนต์

เรียกใช้ฮุกของ store ภายใน setup() store เป็นออบเจ็กต์ที่ตอบสนองต่อการเปลี่ยนแปลง คุณจึงอ่านสถานะและเรียกใช้แอ็กชันได้โดยตรง

<script setup>
import { useCounterStore } from '@/stores/counter';

const store = useCounterStore();
</script>

<template>
  <p>{{ store.count }}</p>
  <button @click="store.increment">+</button>
</template>

storeToRefs — การแยกโครงสร้างอย่างปลอดภัย

การแยกโครงสร้าง store โดยตรงจะทำให้สถานะและ getters สูญเสียการตอบสนองต่อการเปลี่ยนแปลง เพราะกลายเป็นค่าธรรมดา ให้ใช้ storeToRefs() เพื่อแยกโครงสร้างโดยยังคงการตอบสนองไว้

import { storeToRefs } from 'pinia';

const store = useCounterStore();

// Actions can be destructured normally (they're functions):
const { increment } = store;

// State and getters need storeToRefs:
const { count, doubled } = storeToRefs(store);

$patch — การอัปเดตเป็นชุด

store.$patch() ใช้การเปลี่ยนแปลงสถานะหลายรายการเป็นการดำเนินการเดียว เหมาะสำหรับรวมการอัปเดตที่เกี่ยวข้องกันเป็นชุด

store.$patch({
  count: 10,
  name: 'Updated'
});

// Or with a function for complex logic:
store.$patch(state => {
  state.items.push(newItem);
  state.total += newItem.price;
});

$subscribe — การเฝ้าดูการเปลี่ยนแปลงของ Store

store.$subscribe(callback) ตอบสนองต่อการเปลี่ยนแปลงใด ๆ ของ store คล้ายกับ watch ของ Vue แต่ใช้กับ store ทั้งหมด

ปลั๊กอินของ Pinia

ปลั๊กอินของ Pinia จะขยายความสามารถให้กับทุก store การใช้งานที่พบบ่อย ได้แก่ บันทึกสถานะลงใน localStorage เพิ่มการบันทึกข้อมูลเพื่อแก้ไขข้อบกพร่อง หรือแทรกบริการต่าง ๆ

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

DevTools ของ Pinia

Pinia ผสานการทำงานกับ Vue DevTools คุณสามารถตรวจสอบสถานะของคลังสถานะ ดูว่าการกระทำใดถูกเรียกใช้ และย้อนดูสถานะตามช่วงเวลาระหว่างภาพบันทึกสถานะได้

คลังสถานะหลายชุด

สร้างคลังสถานะแยกหนึ่งชุดต่อหนึ่งโดเมน (useAuthStore, useCartStore, useNotificationStore) คลังสถานะแต่ละชุดสามารถนำเข้าและใช้งานคลังสถานะอื่นได้ โครงสร้างแบบแบนของ Pinia (ไม่มีโมดูลซ้อนกัน) ทำให้การดำเนินการนี้ทำได้ง่าย

ตรวจสอบความเข้าใจ

เหตุใดจึงควรใช้ storeToRefs() เมื่อแยกค่าจากคลังสถานะ Pinia?

ตอบคำถามในบทเรียนแบบโต้ตอบ

ทบทวน: Pinia

defineStore ใช้สร้างคลังสถานะ มีรูปแบบ Composition API หรือ Options API เข้าถึงได้ด้วยฮุก useXxxStore() ใช้ storeToRefs() สำหรับการแยกค่าแบบตอบสนอง ใช้ $patch() สำหรับการอัปเดตเป็นชุด ใช้ปลั๊กอินเพื่อคงข้อมูลไว้และเพิ่มความสามารถอื่น ๆ ผสานการทำงานกับ DevTools ใช้คลังสถานะหนึ่งชุดต่อหนึ่งโดเมน — ไม่มีโมดูลซ้อนแบบ Vuex

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 41
บทเรียน: 163

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “Pinia สำหรับ Vue: defineStore และ storeToRefs” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Pinia สำหรับ Vue: defineStore และ storeToRefs” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Pinia สำหรับ Vue: defineStore และ storeToRefs”

กำหนดคลังสถานะ Pinia ด้วย defineStore เข้าถึงในคอมโพเนนต์ และใช้ storeToRefs เพื่อคงการตอบสนองเมื่อแยกโครงสร้างสถานะ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “Pinia สำหรับ Vue: defineStore และ storeToRefs” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

Redux Toolkit: createSlice และ configureStore
Zustand สำหรับสถานะ React แบบเบา
Pinia สำหรับ Vue: defineStore และ storeToRefs
ควรใช้สถานะส่วนกลางหรือสถานะภายในเมื่อใด

← กลับไปที่ Frontend Academy