0Pricing
Vue Academy · บทเรียน

defineStore: สถานะ Getter และ Action

สโตร์แบบ Options เทียบกับสโตร์แบบ Setup การกำหนด state เป็นฟังก์ชัน getter แบบ computed และ action แบบอะซิงโครนัส

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

สามเสาหลักของ store

store แบบตัวเลือกมีสามส่วน ได้แก่ สถานะ ซึ่งเป็นข้อมูล ตัวอ่านค่า ซึ่งเป็นค่าที่คำนวณจากข้อมูล และ แอ็กชัน ซึ่งเป็นเมธอดที่เปลี่ยนสถานะ คุณกำหนดทั้งสามส่วนภายใน defineStore

การกำหนด store

defineStore รับสตริง รหัส ที่ไม่ซ้ำกันและวัตถุตัวเลือก แล้วส่งคืนคอมโพสิเบิล ซึ่งตามธรรมเนียมจะตั้งชื่อว่า useXxxStore

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  // state, getters, actions go here
})

สถานะคือฟังก์ชัน

ตัวเลือก state ต้องเป็น ฟังก์ชันที่ส่งคืนวัตถุ วิธีนี้รับประกันว่าแต่ละอินสแตนซ์ของ store จะได้รับสถานะใหม่ เช่นเดียวกับ data() ในคอมโพเนนต์

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Coddy' })
})

การอ่านสถานะ

เรียกคอมโพสิเบิลของ store ภายใน setup เพื่อรับอินสแตนซ์ จากนั้นอ่านพร็อพเพอร์ตีของสถานะได้โดยตรง โดยพร็อพเพอร์ตีเหล่านี้จะตอบสนองต่อการเปลี่ยนแปลง

const counter = useCounterStore()
console.log(counter.count) // 0

ตัวอ่านค่าคือค่าที่คำนวณ

getters คล้ายกับพร็อพเพอร์ตี computed แต่ละตัวรับ state เป็นอาร์กิวเมนต์แรกและส่งคืนค่าที่คำนวณขึ้นมา โดยค่าจะถูกเก็บไว้เพื่อใช้ซ้ำ

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 2 }),
  getters: {
    doubled: (s) => s.count * 2
  }
})

การใช้ตัวอ่านค่า

เข้าถึงตัวอ่านค่าเหมือนพร็อพเพอร์ตี โดยไม่ต้องใส่วงเล็บ Pinia จะคำนวณใหม่เฉพาะเมื่อสิ่งที่ตัวอ่านค่าอ้างอิงมีการเปลี่ยนแปลง

const counter = useCounterStore()
console.log(counter.doubled) // 4

ตัวอ่านค่าที่อ้างอิงตัวอ่านค่าอื่น

หากต้องการใช้ตัวอ่านค่าอื่น ให้ใช้ this แทนพารามิเตอร์สถานะ เมื่อใช้ this ห้ามใช้ฟังก์ชันลูกศร

getters: {
  doubled: (s) => s.count * 2,
  quadrupled() {
    return this.doubled * 2
  }
}

แอ็กชันเปลี่ยนสถานะ

actions คือเมธอดที่ใช้ this เพื่ออ่านและเปลี่ยนสถานะโดยตรง ไม่ต้องใช้การคอมมิตหรือการส่งคำสั่ง เพียงเรียกใช้เมธอด

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ },
    addBy(amount) { this.count += amount }
  }
})

แอ็กชันแบบอะซิงโครนัส

แอ็กชันสามารถเป็น async ได้ จุดนี้เหมาะสำหรับการเรียกเอพีไอ ให้ดึงข้อมูลแล้วกำหนดผลลัพธ์ลงในสถานะ

actions: {
  async loadUser(id) {
    const res = await fetch('/api/users/' + id)
    this.user = await res.json()
  }
}

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

นำเข้าคอมโพสิเบิล เรียกใช้ภายใน <script setup> และใช้สถานะ ตัวอ่านค่า และแอ็กชันในแม่แบบ

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>

<template>
  <p>{{ counter.count }} -> {{ counter.doubled }}</p>
  <button @click="counter.increment()">+</button>
</template>

การแพตช์หลายฟิลด์

หากต้องการเปลี่ยนฟิลด์สถานะหลายรายการพร้อมกัน ให้ใช้ $patch วิธีนี้จะรวมการเปลี่ยนแปลงไว้ในรายการเดียวของเครื่องมือนักพัฒนา

counter.$patch({ count: 10, name: 'New' })

ตรวจสอบอย่างรวดเร็ว

ทดสอบความรู้ของคุณเกี่ยวกับโครงสร้างของ store แบบตัวเลือก

สรุป

store แบบตัวเลือกมีสามส่วน:

  • state: ฟังก์ชันที่ส่งคืนวัตถุข้อมูล
  • getters: ค่าที่คำนวณและเก็บไว้เพื่อใช้ซ้ำ รับสถานะหรือใช้ this
  • actions: เมธอดที่เปลี่ยนสถานะโดยตรงผ่าน this

ใช้ store โดยเรียกคอมโพสิเบิลภายใน setup

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

บทเรียน “defineStore: สถานะ Getter และ Action” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “defineStore: สถานะ Getter และ Action”

สโตร์แบบ Options เทียบกับสโตร์แบบ Setup การกำหนด state เป็นฟังก์ชัน getter แบบ computed และ action แบบอะซิงโครนัส คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “defineStore: สถานะ Getter และ Action” ใช้เวลานานแค่ไหน

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

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

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

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

  1. Pinia เทียบกับ Vuex: เหตุผลที่ควรเปลี่ยน
  2. defineStore: สถานะ Getter และ Action
  3. การประกอบสโตร์และการเข้าถึงข้ามสโตร์
  4. การคงอยู่ของ Pinia และ DevTools
← กลับไปที่ Vue Academy