Vue Academy · บทเรียน

การคงอยู่ของ Pinia และ DevTools

pinia-plugin-persistedstate การบันทึกเฉพาะฟิลด์ที่กำหนด และการย้อนดูเวลาใน DevTools ของ Pinia

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

การคงสถานะของสโตร์

ตามค่าเริ่มต้น สถานะของ Pinia จะหายไปเมื่อโหลดหน้าเว็บใหม่ หากต้องการเก็บสถานะไว้ ให้ใช้ปลั๊กอิน pinia-plugin-persistedstate ซึ่งจะซิงค์สถานะไปยัง localStorage หรือ sessionStorage

การติดตั้งปลั๊กอิน

ลงทะเบียนปลั๊กอินกับอินสแตนซ์ของ Pinia เพียงครั้งเดียว จากนั้นสโตร์แต่ละตัวจึงเลือกเปิดใช้ได้

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

การเปิดใช้การคงสถานะในสโตร์

กำหนด persist: true ในตัวเลือกของสโตร์ จากนั้นสถานะทั้งหมดจะถูกบันทึกและกู้คืนโดยอัตโนมัติ

export const useUserStore = defineStore('user', {
  state: () => ({ name: '', token: '' }),
  persist: true
})

การเลือกพื้นที่จัดเก็บข้อมูล

ตัวเลือก storage ใช้กำหนดว่าจะบันทึกข้อมูลไว้ที่ใด ใช้ sessionStorage สำหรับข้อมูลที่ควรถูกล้างเมื่อปิดแท็บ

persist: {
  storage: sessionStorage
}

การคงสถานะไว้เฉพาะบางฟิลด์

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

persist: {
  paths: ['token', 'name'] // 'isLoading' not persisted
}

การทำให้ข้อมูลของสโตร์เป็นอนุกรม

การคงสถานะทำงานโดยทำให้สถานะเป็นอนุกรมในรูปแบบ JSON ค่าเหล่านั้นต้องปลอดภัยสำหรับ JSON เช่น ออบเจ็กต์ทั่วไป อาร์เรย์ สตริง และตัวเลข ฟังก์ชัน Maps และอินสแตนซ์ของคลาสต่าง ๆ ต้องใช้ตัวทำให้เป็นอนุกรมแบบกำหนดเอง

persist: {
  serializer: {
    serialize: JSON.stringify,
    deserialize: JSON.parse
  }
}

เครื่องมือสำหรับนักพัฒนา Pinia

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

การแก้จุดบกพร่องแบบย้อนเวลา

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

SSR และการเติมข้อมูลให้สโตร์

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

การใช้ Pinia ร่วมกับ Nuxt

โมดูล @pinia/nuxt เชื่อม Pinia เข้ากับ Nuxt และจัดการการเติมข้อมูลของ SSR โดยอัตโนมัติ สถานะที่เติมระหว่างการเรนเดอร์ฝั่งเซิร์ฟเวอร์จะถูกทำให้เป็นอนุกรมลงในหน้าเว็บ และกู้คืนบนไคลเอ็นต์

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@pinia/nuxt']
})

การใช้การคงสถานะร่วมกับ SSR

โปรดระวัง: localStorage ไม่มีอยู่บนเซิร์ฟเวอร์ ปลั๊กอินสำหรับคงสถานะจะตรวจจับกรณีนี้และทำงานเฉพาะฝั่งไคลเอ็นต์ ดังนั้นการเติมข้อมูลของ SSR จึงใช้สถานะจากเซิร์ฟเวอร์ก่อน แล้วจึงเพิ่มชั้นการคงสถานะภายหลัง

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

ทดสอบความรู้เกี่ยวกับการคงสถานะและเครื่องมือสำหรับนักพัฒนา

บทสรุป

คุณได้เรียนรู้เรื่องการคงสถานะและเครื่องมือดังนี้

pinia-plugin-persistedstate บันทึกสถานะลงใน localStorage/sessionStorage
ตัวเลือก storage และ paths ควบคุมว่าจะบันทึกที่ใดและบันทึกอะไร
สถานะจะถูกทำให้เป็นอนุกรมในรูปแบบ JSON ดังนั้นค่าต่าง ๆ ต้องปลอดภัยสำหรับ JSON
เครื่องมือสำหรับนักพัฒนาช่วยให้ตรวจสอบข้อมูลแบบเรียลไทม์และย้อนเวลาได้ ส่วน @pinia/nuxt จะจัดการการเติมข้อมูลของ SSR

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

บทเรียน “การคงอยู่ของ Pinia และ DevTools” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การคงอยู่ของ Pinia และ DevTools”

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

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

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

บทเรียน “การคงอยู่ของ Pinia และ DevTools” ใช้เวลานานแค่ไหน

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

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

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

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

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

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