Vue Academy · บทเรียน

Mutations และ Actions

เปลี่ยนสถานะด้วย MUTATION และ action แบบอะซิงโครนัส

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

การเปลี่ยนสถานะอย่างปลอดภัย

ใน Vuex คุณจะไม่แก้ไขสถานะโดยตรงจากคอมโพเนนต์ แต่การเปลี่ยนแปลงทั้งหมดต้องดำเนินการผ่าน การกลายพันธุ์ เส้นทางที่ชัดเจนเพียงเส้นทางเดียวนี้ทำให้ติดตามและแก้ไขข้อบกพร่องของการเปลี่ยนสถานะแต่ละครั้งได้ใน Vue DevTools

การกลายพันธุ์คืออะไร

การกลายพันธุ์คือฟังก์ชันแบบทำงานพร้อมกันที่รับสถานะปัจจุบันแล้วเปลี่ยนแปลงสถานะนั้น การกลายพันธุ์เป็นสถานที่เพียงแห่งเดียวที่อนุญาตให้แก้ไขสถานะได้

mutations: {
  increment(state) {
    state.count++
  }
}

การกลายพันธุ์ต้องทำงานพร้อมกัน

การกลายพันธุ์ต้องทำงานแบบพร้อมกัน หากใส่โค้ดแบบไม่พร้อมกัน เช่น การเรียกเครือข่าย ไว้ภายในการกลายพันธุ์ DevTools จะติดตามไม่ได้ว่าสถานะเปลี่ยนแปลงจริงเมื่อใด ทำให้การแก้ไขข้อบกพร่องแบบย้อนดูตามเวลาใช้งานไม่ได้

การ commit การกลายพันธุ์

หากต้องการเรียกใช้การกลายพันธุ์จากคอมโพเนนต์ ให้commitการกลายพันธุ์นั้นด้วยชื่อผ่าน this.$store.commit

methods: {
  add() {
    this.$store.commit("increment")
  }
}

การส่งข้อมูลประกอบ

การกลายพันธุ์รับอาร์กิวเมนต์เพิ่มเติมที่เรียกว่า ข้อมูลประกอบ ซึ่งช่วยให้คุณส่งข้อมูลเข้าไปในการเปลี่ยนแปลงได้

mutations: {
  incrementBy(state, amount) {
    state.count += amount
  }
}

// commit with payload
this.$store.commit("incrementBy", 5)

ข้อมูลประกอบแบบออบเจ็กต์

หากมีหลายค่า ให้ส่งข้อมูลประกอบเป็นออบเจ็กต์ วิธีนี้ชัดเจนและยืดหยุ่นกว่าการส่งอาร์กิวเมนต์ตามตำแหน่ง

mutations: {
  setUser(state, payload) {
    state.user = { id: payload.id, name: payload.name }
  }
}

this.$store.commit("setUser", { id: 1, name: "Ada" })

แอ็กชันคืออะไร

แอ็กชันจัดการงานแบบอะซิงโครนัสและตรรกะทางธุรกิจ แอ็กชันจะไม่เปลี่ยนสถานะโดยตรง แต่จะส่งมิวเทชันให้ทำงานแทน วิธีนี้ช่วยแยกโค้ดแบบอะซิงโครนัสออกจากการเปลี่ยนสถานะจริง

การกำหนดแอ็กชัน

แอ็กชันจะได้รับออบเจ็กต์บริบท จากออบเจ็กต์นี้ คุณสามารถส่งมิวเทชันด้วย commit หรือเข้าถึงสถานะได้

actions: {
  async fetchUser(context, userId) {
    const res = await fetch("/api/users/" + userId)
    const data = await res.json()
    context.commit("setUser", data)
  }
}

การแยกโครงสร้างบริบท

โดยทั่วไปเราจะแยก commit ออกจากบริบทโดยตรงเพื่อเขียนโค้ดให้กระชับ

actions: {
  async loadTodos({ commit }) {
    commit("setLoading", true)
    const res = await fetch("/api/todos")
    commit("setTodos", await res.json())
    commit("setLoading", false)
  }
}

การเรียกใช้แอ็กชัน

คอมโพเนนต์เรียกใช้แอ็กชันด้วย this.$store.dispatch โดยส่งเพย์โหลดเพิ่มเติมได้ การเรียกใช้จะคืนค่าพรอมิสสำหรับแอ็กชันแบบอะซิงโครนัส

methods: {
  async load() {
    await this.$store.dispatch("loadTodos")
  }
}

ลำดับการทำงานทั้งหมด

วงจรการทำงานทั้งหมดคือ คอมโพเนนต์เรียกใช้แอ็กชัน แอ็กชันทำงานแบบอะซิงโครนัสและส่งมิวเทชันให้ทำงาน จากนั้นมิวเทชันเปลี่ยนแปลงสถานะ แล้วสถานะแบบรีแอกทีฟจะอัปเดตส่วนติดต่อผู้ใช้โดยอัตโนมัติ

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

ทดสอบความเข้าใจเกี่ยวกับมิวเทชันและแอ็กชัน

ทบทวน

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

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

บทเรียน “Mutations และ Actions” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “Mutations และ Actions”

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

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

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

บทเรียน “Mutations และ Actions” ใช้เวลานานแค่ไหน

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

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

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

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

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