1_8ubhBMI6a1czUyS0cg6nYg

มาลองใช้ Vuex-ORM กับ NuxtJS กัน

บทความนี้เหมาะกับคนที่เคยเขียน Vue หรือ NuxtJS และเคยใช้ vuex มาก่อนนะครับ หากใครยังไม่เคยใช้ลองดูได้ที่บทความนี้ครับ

เริ่มต้นเขียน Nuxt.js จาก baby to ready
สำหรับ Blog นี้เหมาสำหรับคนที่เคยเขียน Vue.js มาเเล้ว หรือเคยผ่านการเขียน Javascript เบื่องต้นมาก่อน เพราะว่า Nuxt…
medium.com

ปกติแล้วถ้าเราอยากจะสร้าง CRUD ( Create Read Update Delete ) ด้วยการเก็บค่าไว้ที่ Vuex หน้าตาก็จะประมาณนี้

แล้วถ้า posts ต้องมีการเชื่อมกับอีก store ด้วยละ เช่น Post นี้มี comment อะไรบ้าง มันก็จะเริ่มวุ่นวายขึ้นมาทีละนิดละหน่อยจนอาจจะทำให้รู้สึกว่าโค้ดของเรายุ่งยากภายหลังได้ครับ

เอาละเรามาลองใช้ Vuex-ORM ในการจัดการ store แทนเราดีกว่า ว่าหน้าตาจะออกมาแบบไหน ก่อนอื่นก็ลงพระเอกของเราก่อนครับ

 หรือ 

ทีนี้อันดับแรกผมจะสร้าง folder Models ไว้ตรง root project นะครับ folder นี้จะเอาไว้เก็บ Models ต่างๆของ vuex-orm ครับ หลังจากสร้าง folder แล้วให้เราสร้างไฟล์ Post.js ครับ หน้าตาไฟล์จะประมาณนี้

เราจะกำหนเ entity ในการเก็บชื่อว่า post และประกาศ field ต่างๆของ Model Post ให้มี id เป็น auto increment ( เพิ่มเลขเอง ) และ title เป็น string โดยกำหนดค่า default ไว้ในวงเล็บ

ทีนี้เราต้องประกาศใช้ Model และ กำหนดให้ vuex ใช้ vuex-orm แทน store ปกติซะก่อน เราจะสร้าง folder database เพื่อเรียกใช้ model post ที่สร้างมา

หากต้องการเพิ่มใช้ Model ตัวอื่นๆก็สามารถมา register ได้ตรงนี้เลย หลังจากนั้นให้ทำการสร้าง index.js ใน folder stores

ทีนี้ vuex-orm ก็พร้อมใช้งานแล้ว เราไปดูกันดีกว่าครับว่าในหน้า component เราจะทำ CRUD ได้อย่างไร

จะเห็นว่า CRUD ง่ายขึ้นมากๆ และดูวุ่นวายน้อยลง ตัว Vuex-ORM ยังสามารคอิงความสัมพันธ์กับ Model อื่นๆในรูปแบบของ belongsTo, hasMany, hasOne ได้ด้วยนะครับ ซึ้งพวก ORM แบบนี้ผมค่อนข้างชินเพราะเจอกับ Laravel มาก่อน

หากผิดพลาดประการณ์ใด หรือ เลือกใช้คำผิดกราบขออภัยตอนเขียนกำลังเบลอๆ 085–71xxxxxx คนละเบลอ !! ผ่าม

ขอบคุณครับ……

Related Posts

Instagram อัพเดท!! สถานะใต้โปรไฟล์ทำอย่างไร ?

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

ช้อปออนไลน์คลายเครียดจริงหรอ?

ช้อปออนไลน์ คลายเครียด จริงหรอ ?

‘ใครบางคนเคยบอกไว้ว่าเงินซื้อความสุขไม่ได้’  ซึ่งมันไม่จริงเสมอไปหรอก สำหรับบางคนแล้ว การได้ใช้เงินอาจเป็นความสุข ความสุขหนึ่งของเขาก็ได้ แล้ว ‘ช้อปออนไลน์’ ล่ะ ? “เครียดจัง