มาลองใช้ Vuex-ORM กับ NuxtJS กัน
บทความนี้เหมาะกับคนที่เคยเขียน Vue หรือ NuxtJS และเคยใช้ vuex มาก่อนนะครับ หากใครยังไม่เคยใช้ลองดูได้ที่บทความนี้ครับ
ปกติแล้วถ้าเราอยากจะสร้าง CRUD ( Create Read Update Delete ) ด้วยการเก็บค่าไว้ที่ Vuex หน้าตาก็จะประมาณนี้
แล้วถ้า posts ต้องมีการเชื่อมกับอีก store ด้วยละ เช่น Post นี้มี comment อะไรบ้าง มันก็จะเริ่มวุ่นวายขึ้นมาทีละนิดละหน่อยจนอาจจะทำให้รู้สึกว่าโค้ดของเรายุ่งยากภายหลังได้ครับ
เอาละเรามาลองใช้ Vuex-ORM ในการจัดการ store แทนเราดีกว่า ว่าหน้าตาจะออกมาแบบไหน ก่อนอื่นก็ลงพระเอกของเราก่อนครับ
yarn add @vuex-orm/core หรือ npm install @vuex-orm/core
ทีนี้อันดับแรกผมจะสร้าง 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 คนละเบลอ !! ผ่าม
ขอบคุณครับ……
