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

Getters และโมดูล

คำนวณสถานะที่ได้มาและจัดระเบียบสโตร์เป็นโมดูล

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

สถานะที่คำนวณด้วยเก็ตเตอร์

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

การกำหนดเก็ตเตอร์

เก็ตเตอร์คือฟังก์ชันที่รับสถานะและคืนค่าที่คำนวณต่อแล้ว

getters: {
  completedTodos(state) {
    return state.todos.filter(t => t.done)
  }
}

เก็ตเตอร์ที่ใช้เก็ตเตอร์อื่น

เก็ตเตอร์จะได้รับอาร์กิวเมนต์ตัวที่สองซึ่งประกอบด้วยเก็ตเตอร์อื่นทั้งหมด คุณจึงนำเก็ตเตอร์เหล่านั้นมาประกอบการทำงานร่วมกันได้

getters: {
  completedTodos(state) {
    return state.todos.filter(t => t.done)
  },
  completedCount(state, getters) {
    return getters.completedTodos.length
  }
}

การเข้าถึงเก็ตเตอร์

อ่านค่าเก็ตเตอร์ผ่าน this.$store.getters ภายในพร็อพเพอร์ตีที่คำนวณ

computed: {
  doneCount() {
    return this.$store.getters.completedCount
  }
}

เก็ตเตอร์แบบเมธอด

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

getters: {
  todoById: (state) => (id) => {
    return state.todos.find(t => t.id === id)
  }
}

// usage
this.$store.getters.todoById(3)

ตัวช่วย mapGetters

เช่นเดียวกับ mapState ตัวช่วย mapGetters จะเปลี่ยนเก็ตเตอร์เป็นพร็อพเพอร์ตีที่คำนวณโดยอัตโนมัติ

import { mapGetters } from "vuex"

export default {
  computed: {
    ...mapGetters(["completedTodos", "completedCount"])
  }
}

เหตุใดจึงแยกเป็นโมดูล

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

การกำหนดโมดูล

โมดูลเป็นเพียงออบเจ็กต์ที่มีตัวเลือกเหมือนกับสโตร์ คุณลงทะเบียนโมดูลไว้ภายใต้คีย์ modules

const cart = {
  state: () => ({ items: [] }),
  mutations: {
    addItem(state, item) { state.items.push(item) }
  },
  getters: {
    itemCount: (state) => state.items.length
  }
}

การลงทะเบียนโมดูล

รวมโมดูลไว้ในสโตร์หลักภายใต้ modules แต่ละคีย์จะกลายเป็นชื่อโมดูล

import { createStore } from "vuex"
import cart from "./modules/cart"
import user from "./modules/user"

export const store = createStore({
  modules: { cart, user }
})

การกำหนดเนมสเปซให้โมดูล

กำหนด namespaced: true เพื่อให้โมดูลมีขอบเขตเฉพาะของตนเอง วิธีนี้ช่วยป้องกันชื่อซ้ำระหว่างโมดูลและทำให้โครงสร้างชัดเจน

const cart = {
  namespaced: true,
  state: () => ({ items: [] }),
  getters: {
    itemCount: (state) => state.items.length
  }
}

การเข้าถึงโมดูลที่มีเนมสเปซ

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

// module state lives under the module key
this.$store.state.cart.items

// namespaced getter, mutation, action
this.$store.getters["cart/itemCount"]
this.$store.commit("cart/addItem", item)
this.$store.dispatch("cart/checkout")

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

ทดสอบความเข้าใจเกี่ยวกับเก็ตเตอร์และโมดูล

ทบทวน

เก็ตเตอร์คำนวณค่าที่แคชไว้จากสถานะ โดยเข้าถึงผ่าน this.$store.getters หรือ mapGetters ส่วนโมดูลจะแยกสโตร์ขนาดใหญ่ออกเป็นหน่วยที่มีหน้าที่ชัดเจน การกำหนด namespaced: true จะกำหนดขอบเขตให้โมดูล ทำให้คุณอ้างถึงสมาชิกด้วยคำนำหน้า module/name ตอนนี้คุณมีเครื่องมือ Vuex ครบถ้วนแล้ว ได้แก่ สถานะ มิวเทชัน แอ็กชัน เก็ตเตอร์ และโมดูล

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

บทเรียน “Getters และโมดูล” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “Getters และโมดูล”

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

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

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

บทเรียน “Getters และโมดูล” ใช้เวลานานแค่ไหน

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

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

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

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

  1. พื้นฐาน Vuex
  2. Mutations และ Actions
  3. Getters และโมดูล
← กลับไปที่ Vue Academy