Vue Academy · บทเรียน

การประกอบสโตร์และการเข้าถึงข้ามสโตร์

การใช้สโตร์หนึ่งภายในอีกสโตร์หนึ่ง รูปแบบการประกอบสโตร์ และการหลีกเลี่ยงการขึ้นต่อกันแบบวนรอบ

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

store สามารถใช้ store อื่นได้

app จริงมีหลาย store ที่ต้องใช้งานร่วมกัน store ตะกร้าอาจต้องใช้ store การยืนยันตัวตนเพื่อทราบผู้ใช้ปัจจุบัน Pinia ทำให้ การเข้าถึงข้าม store เป็นเรื่องตรงไปตรงมา

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

ภายในแอ็กชัน เพียงเรียกคอมโพสิเบิลของ store อื่น เนื่องจากแอ็กชันทำงานหลังจาก Pinia พร้อมใช้งานแล้ว วิธีนี้จึงปลอดภัย

import { useAuthStore } from './auth'

export const useCartStore = defineStore('cart', {
  state: () => ({ items: [] }),
  actions: {
    checkout() {
      const auth = useAuthStore()
      if (!auth.isLoggedIn) return
      // proceed with auth.userId
    }
  }
})

ไวยากรณ์ของ store แบบตั้งค่า

นอกจากวัตถุตัวเลือกแล้ว defineStore ยังรับ ฟังก์ชันตั้งค่า ได้ด้วย รูปแบบคล้ายกับการตั้งค่าของคอมโพเนนต์ คือประกาศรีฟและค่าคำนวณ แล้วส่งคืนค่าเหล่านั้น

import { ref, computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  return { count }
})

สถานะในรูปรีฟ

ใน store แบบตั้งค่า ทุก ref หรือ reactive ที่คุณส่งคืนจะกลายเป็น สถานะ ใช้ ref สำหรับค่าพื้นฐาน และใช้ reactive สำหรับวัตถุ

export const useUserStore = defineStore('user', () => {
  const name = ref('Coddy')
  const profile = reactive({ age: 30 })
  return { name, profile }
})

ตัวอ่านค่าในรูปค่าคำนวณ

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

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

แอ็กชันในรูปฟังก์ชัน

ฟังก์ชันที่ส่งคืนมาจะเป็น แอ็กชัน ซึ่งสามารถอ่านและเขียนรีฟได้โดยตรงผ่าน .value

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

การส่งคืนรีฟและค่าคำนวณ

กฎสำคัญของ store แบบตั้งค่าคือ ส่งคืนทุกอย่างที่คุณต้องการเปิดเผย สิ่งใดที่ไม่ได้ส่งคืนจะยังคงเป็นข้อมูลส่วนตัวของ store

export const useStore = defineStore('s', () => {
  const visible = ref(0)
  const secret = ref('hidden') // not returned -> private
  return { visible }
})

การใช้ข้าม store ใน store แบบตั้งค่า

ใน store แบบตั้งค่า คุณสามารถเรียก store อื่นในระดับบนสุด แล้วใช้ store นั้นในค่าคำนวณหรือแอ็กชันได้

export const useCartStore = defineStore('cart', () => {
  const auth = useAuthStore()
  const canCheckout = computed(() => auth.isLoggedIn)
  return { canCheckout }
})

การหลีกเลี่ยงการพึ่งพาแบบวนรอบ

หาก store A นำเข้า store B และ B นำเข้า A คุณอาจพบ การพึ่งพาแบบวนรอบ หลีกเลี่ยงการเรียก store อื่นที่ระดับบนสุดของโมดูล แต่ให้เรียก ภายในแอ็กชันหรือตัวอ่านค่าที่จำเป็นต้องใช้แทน

// Risky: top-level use in both directions
// Safe: call useOtherStore() lazily inside the action
actions: {
  doWork() {
    const other = useOtherStore() // resolved at call time
  }
}

เหตุใดการเรียกแบบเลื่อนเวลาจึงช่วยได้

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

store แบบตัวเลือกเทียบกับ store แบบตั้งค่า

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

ตรวจสอบความเข้าใจอย่างรวดเร็ว

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

บทสรุป

คุณได้เรียนรู้การประกอบสโตร์เข้าด้วยกันดังนี้

เรียก composable ของสโตร์อื่นภายในแอ็กชันเพื่อเข้าถึงข้อมูลข้ามสโตร์
สโตร์แบบตั้งค่าใช้ฟังก์ชัน โดย refs คือสถานะ computed คือ getter และฟังก์ชันคือแอ็กชัน
ส่งคืนทุกสิ่งที่ต้องการเปิดให้ใช้งาน
เรียกสโตร์แบบทำงานเมื่อจำเป็นภายในฟังก์ชัน เพื่อหลีกเลี่ยงการพึ่งพากันแบบวนรอบ

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

บทเรียน “การประกอบสโตร์และการเข้าถึงข้ามสโตร์” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การประกอบสโตร์และการเข้าถึงข้ามสโตร์”

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

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

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

บทเรียน “การประกอบสโตร์และการเข้าถึงข้ามสโตร์” ใช้เวลานานแค่ไหน

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

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

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

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

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

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