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

Pinia เทียบกับ Vuex: เหตุผลที่ควรเปลี่ยน

ไม่มี MUTATION การอนุมาน TypeScript การรองรับ DevTools API ที่เรียบง่ายกว่า และการแบ่งโมดูลเป็นค่าเริ่มต้น

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

เหตุผลที่ Pinia มาแทนที่ Vuex

Pinia เป็นไลบรารีจัดการสถานะอย่างเป็นทางการสำหรับ Vue 3 และได้รับการแนะนำให้ใช้แทน Vuex โดยคงส่วนที่ดีของ Vuex ไว้ แต่ตัดโค้ดประกอบที่เยิ่นเย้อและส่วนที่ทำงานขัดกับ TypeScript ออก

ไม่ต้องใช้การกลายสถานะอีกต่อไป

Vuex กำหนดให้ใช้ mutations เป็นวิธีเดียวในการเปลี่ยนสถานะ Pinia ตัดสิ่งเหล่านี้ออกทั้งหมด — แอ็กชันเปลี่ยนสถานะโดยตรง ใช้ขั้นตอนน้อยลง ไฟล์น้อยลง และยังติดตามการทำงานด้วยเครื่องมือนักพัฒนาได้เหมือนเดิม

// Vuex: state -> mutation -> action (3 steps)
// Pinia: action mutates state directly (1 step)
actions: {
  increment() {
    this.count++ // direct, no commit needed
  }
}

การอนุมาน TypeScript ได้ทันที

ใน Vuex การระบุชนิดข้อมูลให้กับ store เป็นเรื่องยุ่งยากและต้องใช้ตัวห่อที่ซับซ้อน Pinia อนุมานชนิดข้อมูลโดยอัตโนมัติจาก state, getters และ actions ของคุณ โดยไม่ต้องมีชั้นการระบุชนิดข้อมูลเพิ่มเติม

const store = useCounterStore()
store.count       // inferred as number
store.doubled     // inferred from getter
store.increment() // fully typed action

ออกแบบให้เป็นโมดูล

Vuex ใช้ store เดียวที่มี modules ซ้อนกันและทำให้การจัดการพื้นที่ชื่อยุ่งยาก Pinia เป็นโมดูลโดยธรรมชาติ: หนึ่งไฟล์ต่อหนึ่ง store และแต่ละ store สร้างด้วย defineStore ของตัวเอง ไม่ต้องลงทะเบียนส่วนกลาง

// stores/counter.js
export const useCounterStore = defineStore(...)

// stores/user.js
export const useUserStore = defineStore(...)

ไม่จำเป็นต้องใช้พื้นที่ชื่อ

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

import { useUserStore } from '@/stores/user'
const user = useUserStore()

รองรับเครื่องมือนักพัฒนา

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

ชุดรวมที่เล็กลง

Pinia มีขนาดเล็กกว่า Vuex ประมาณ 1KB และรองรับการตัดโค้ดที่ไม่ได้ใช้ store ที่คุณไม่เคยนำเข้าจะไม่ถูกรวมไว้ในชุดรวมสุดท้าย

เอพีไอที่เรียบง่ายกว่า

ไม่มีโค้ดประกอบของ mapState, mapGetters หรือ mapActions คุณเรียกใช้คอมโพสิเบิลของ store ภายใน setup แล้วใช้วัตถุที่ส่งคืนมาได้โดยตรง

const counter = useCounterStore()
// access state, getters, and actions on one object

ทำงานร่วมกับเอพีไอทั้งสองรูปแบบ

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

การติดตั้ง Pinia

เพิ่ม Pinia ให้กับ app โดยสร้างอินสแตนซ์และลงทะเบียนเป็นปลั๊กอิน หลังจากนั้นคอมโพเนนต์ใด ๆ ก็สามารถใช้ store ใด ๆ ได้

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(createPinia()).mount('#app')

ควรเลือกใช้ Pinia เมื่อใด

ใช้ Pinia เมื่อจำเป็นต้องใช้สถานะร่วมกันในหลายคอมโพเนนต์ เมื่อสถานะต้องคงอยู่ข้ามการเปลี่ยนเส้นทาง หรือเมื่อต้องการตรวจสอบสถานะด้วยเครื่องมือนักพัฒนา สำหรับสถานะที่ใช้เฉพาะในคอมโพเนนต์เดียว ref ธรรมดายังคงเรียบง่ายกว่า

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

ทดสอบความเข้าใจของคุณเกี่ยวกับเหตุผลที่ Pinia มาแทนที่ Vuex

สรุป

Pinia คือตัวเลือกสมัยใหม่สำหรับการจัดการสถานะใน Vue 3:

  • ไม่ต้องใช้การกลายสถานะ — แอ็กชันเปลี่ยนสถานะโดยตรง
  • อนุมาน TypeScript โดยอัตโนมัติ ไม่ต้องใช้ตัวห่อ
  • เป็นโมดูล: หนึ่ง store ต่อหนึ่งไฟล์ ไม่ต้องใช้พื้นที่ชื่อ
  • รองรับเครื่องมือนักพัฒนาอย่างเต็มรูปแบบ และมีชุดรวมเล็กลงประมาณ 1KB

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

บทเรียน “Pinia เทียบกับ Vuex: เหตุผลที่ควรเปลี่ยน” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “Pinia เทียบกับ Vuex: เหตุผลที่ควรเปลี่ยน”

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

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

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

บทเรียน “Pinia เทียบกับ Vuex: เหตุผลที่ควรเปลี่ยน” ใช้เวลานานแค่ไหน

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

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

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

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

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