Vuex เป็น state ไลบรารีการจัดการสำหรับ Vue.js แอปพลิเคชัน ช่วยให้คุณสามารถจัดการและซิงโครไนซ์ข้อมูลระหว่าง component s ต่างๆ ในแอปพลิเคชันของคุณ Vuex ใช้สถาปัตยกรรม Flux ทำให้ง่ายและมีประสิทธิภาพในการจัดการแอปพลิเค state ชัน
แนวคิดหลัก Vuex ได้แก่
1. State
ใน แสดงถึงที่เก็บข้อมูลส่วนกลางสำหรับแอปพลิเคชันของ state คุณ Vuex เก็บข้อมูลของแอปพลิเคชันที่ต้องแชร์ระหว่าง component s ต่างๆ นี่คือตัวอย่างการกำหนด a state ใน Vuex:
2. Mutations
Mutations มีหน้าที่รับผิดชอบในการแก้ไข state ใน Vuex. เป็นฟังก์ชันซิงโครนัสที่ใช้กระแส state และเพย์โหลดเป็นอาร์กิวเมนต์ นี่คือตัวอย่างของการกำหนดการกลายพันธุ์ใน Vuex:
3. Actions
Actions ใช้เพื่อจัดการการทำงานแบบอะซิงโครนัสและส่ง mutations ไปแก้ไขไฟล์ state. พวกเขาสามารถมีการเรียก API งาน async หรือตรรกะที่ซับซ้อน นี่คือตัวอย่างการกำหนดการกระทำใน Vuex:
4. Getters
Getters อนุญาตให้คุณดึงและคำนวณที่ได้มา state จาก Vuex ร้านค้า มีประโยชน์สำหรับการเข้าถึงและจัดการข้อมูลก่อนที่จะส่งคืนไปยัง component s นี่คือตัวอย่างการกำหนด getter ใน Vuex:
หากต้องการติดตั้ง Vuex ใน Vue.js โครงการของคุณ คุณสามารถทำตามขั้นตอนต่อไปนี้
ขั้นตอนที่ 1: ติดตั้ง Vuex ผ่าน npm หรือเส้นด้าย:
หรือ
ขั้นตอนที่ 2: สร้าง store.js
ไฟล์ในไดเรกทอรีรากของโปรเจ็กต์ของคุณ ที่นี่เราจะประกาศและจัดการแอปพลิเค state ชัน
ขั้นตอนที่ 3: ใน store.js
ไฟล์ นำเข้า Vuex และสร้างวัตถุที่เก็บใหม่:
ขั้นตอนที่ 4: ใน main.js
ไฟล์ นำเข้าร้านค้าและเชื่อมโยงไปยังแอปพลิเคชัน Vue ของคุณ:
ขั้นตอนที่ 5: ตอนนี้คุณได้ติดตั้งและตั้งค่า Vuex ในโครงการของคุณ แล้ว คุณสามารถประกาศ state s, getters, mutations และ actions ใน store.js
ไฟล์ และใช้ใน Vue component s ของคุณ
ตัวอย่าง:
ใน store.js
ไฟล์ คุณสามารถประกาศ state การกลายพันธุ์อย่างง่าย ๆ ดังนี้:
ใน Vue component คุณสามารถใช้ state and การกลายพันธุ์ได้โดยใช้ and ฟังก์ชั่น: mapState
mapMutations
ด้วยขั้นตอนเหล่านี้ คุณได้ติดตั้งสำเร็จ Vuex และสามารถใช้เพื่อจัดการ แอปพลิเคชัน state ของคุณ ได้ Vue.js
ด้วย Vuex คุณสามารถจัดการแอปพลิเคชันได้อย่างง่ายดายและ state สม่ำเสมอ ช่วยเพิ่มความสามารถในการบำรุงรักษาโค้ดและการนำกลับมาใช้ใหม่ ในขณะที่ให้แนวทางที่มีโครงสร้างในการจัดการข้อมูล