Vue Academy · บทเรียน

พื้นฐาน Vuex

ทำความเข้าใจสโตร์ Vuex และสถานะส่วนกลาง

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

เหตุใดจึงต้องใช้สถานะส่วนกลาง

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

แหล่งข้อมูลจริงเพียงหนึ่งเดียว

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

การติดตั้ง Vuex

Vuex 4 เป็นรุ่นที่สร้างมาสำหรับ Vue 3 ให้ติดตั้งด้วยตัวจัดการแพ็กเกจ จากนั้นสร้างและลงทะเบียนที่จัดเก็บกับแอปของคุณ

npm install vuex@4

การสร้างที่จัดเก็บ

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

import { createStore } from "vuex"

export const store = createStore({
  state() {
    return {
      count: 0,
      user: null
    }
  }
})

การลงทะเบียนที่จัดเก็บ

ส่งที่จัดเก็บให้แอปด้วย app.use(store) การทำเช่นนี้ทำให้ทุกคอมโพเนนต์เข้าถึงที่จัดเก็บผ่าน this.$store ได้

import { createApp } from "vue"
import App from "./App.vue"
import { store } from "./store"

const app = createApp(App)
app.use(store)
app.mount("#app")

คุณสมบัติสถานะ

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

state() {
  return {
    todos: [],
    isLoading: false,
    theme: "light"
  }
}

การเข้าถึงสถานะใน API แบบ Options

ภายในคอมโพเนนต์ คุณเข้าถึงที่จัดเก็บผ่าน this.$store.state ได้ คุณสมบัติที่คำนวณได้จะช่วยรักษาการตอบสนองของค่าไว้

export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}

การใช้สถานะในแม่แบบ

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

<template>
  <p>Current count: {{ count }}</p>
</template>

ตัวช่วย mapState

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

import { mapState } from "vuex"

export default {
  computed: {
    ...mapState(["count", "user"])
  }
}

mapState พร้อมการตั้งชื่อใหม่

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

computed: {
  ...mapState({
    total: "count",
    userName: (state) => state.user ? state.user.name : "Guest"
  })
}

การเข้าถึงสถานะใน API แบบ Composition

เมื่อใช้ API แบบ Composition ให้เรียก useStore() ภายใน setup เพื่อรับอินสแตนซ์ของที่จัดเก็บ จากนั้นอ่านสถานะผ่านค่าที่คำนวณได้

import { computed } from "vue"
import { useStore } from "vuex"

export default {
  setup() {
    const store = useStore()
    const count = computed(() => store.state.count)
    return { count }
  }
}

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

ทดสอบความเข้าใจเกี่ยวกับพื้นฐานของ Vuex

ทบทวน

Vuex มีที่จัดเก็บแบบรวมศูนย์และตอบสนองต่อการเปลี่ยนแปลง ซึ่งเป็นแหล่งข้อมูลจริงเพียงหนึ่งเดียว คุณสร้างที่จัดเก็บด้วย createStore ลงทะเบียนผ่าน app.use และอ่าน state ผ่านคุณสมบัติที่คำนวณได้หรือตัวช่วย mapState ใน API แบบ Composition คุณเข้าถึงที่จัดเก็บด้วย useStore() บทถัดไปคุณจะเรียนรู้วิธีเปลี่ยนสถานะนั้นอย่างปลอดภัย

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

บทเรียน “พื้นฐาน Vuex” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “พื้นฐาน Vuex”

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

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

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

บทเรียน “พื้นฐาน Vuex” ใช้เวลานานแค่ไหน

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

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

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

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

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