SOFTWARE DEVELOPMENT | 4 mins read

ส่งข้อมูลระหว่างคอมโพเนนท์แบบง่ายไม่ต้อง chain ด้วย Provide/Inject บน Vue.js

By Ford on 06 Jan 2021
sennalabs-blog-banner

สวัสดีครับ เพื่อน ๆ ชาว Developer ทุกคน วันนี้เอาใจสาย Front-end กันหน่อย Framework ที่เราจะมาพูดถึงกันในวันนี้ คือ VueJs เฟรมเวิร์คฟรอนท์เอนต์ (Front-end) ที่มาแรงในขณะนี้

สำหรับวันนี้นั้นผมมีวิธีดี ๆง่าย ๆ สำหรับการจัดการ การส่งข้อมูล ระหว่างคอมโพเนนท์แม่ไปหาลูก แต่แน่นอน สำหรับใครหลายคนก็คงจะบอกว่าไม่น่ามีอะไรยากใช่ไหมหละ? แต่ปัญหามักจะมาตอนเมื่อเราต้องการส่งข้อมูลจากแม่ไปหาลูก หลาน เหลน โหลน.. พอจะนึกภาพออกแล้วใช่ไหมหละ มันคงน่ากลัวน่าดูหากเราจะต้องไล่ Chain ส่งข้อมูลไปในแต่ละลำดับอย่างไร ทาง Vue ก็ไม่รอช้ามีเครื่องมือมาให้ใช้กันอย่างสะดวกสบาย พระเอกของเรานั่นก็คือ Provide / Inject นั่นเอง

Provide / Inject สามารถช่วยให้เราส่งข้อมูลไปหา ลูก หลาน เหลน โหลน ได้อย่างง่ายดายเพียง สองบรรทัดเท่านั้น!! ไม่ว่าจะส่งไปลึกแค่นั้นมีลูกกี่ชั้นก็ใส่เพียง “สองบรรทัด” เราลองไปดูหน้าตาของ Code กันเลยดีกว่า

ในส่วนของคอมโพเนนท์แม่ จะมีหน้าตาเป็นตัวอย่างนี้ครับ  

sennalabs-Frontend-Component 

ในส่วนของคอมโพเนนท์ลูก จะมีหน้าตาเป็นตัวอย่างนี้ครับ 

sennalabs-Frontend-Component1

เพียงเท่านี้เราก็สามารถเรียกใช้งานข้อมูลของคอมโพเนนท์แม่ได้อย่างง่ายดาย โดยการใช้งานนั้นเราสามารถนำ inject ไปใช้ได้ทุกที่ที่เป็นคอมโพเนนท์ลูก ลักษณะการทำงานนี้จะคล้ายๆกับ Context ของ React ถ้าใครเคยเขียน React มาก่อน คงจะคุ้นกันดีเลยใช่ไหมครับ ถ้าคอมโพเนนท์ไหนๆ อยู่ใน Scope ของคอมโพเนนท์แม่ ก็สามารถเรียกใช้งานได้หมด 

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

วันนี้เลยมีวิธีเจ๋งๆดีๆ มาแนะนำในการแก้ไขปัญหานี้โดยการใช้ Getter มาช่วยในการทำให้ Provide / Inject เป็นแบบ Reactive 

สำหรับ Getter / Setter ถือเป็น Mechanism ที่เป็นพื้นฐาน เราเลยจะขอข้ามไปในบทความนี้ก่อนนะครับ เราจะนำมา Implement รวมกับ Provide / Inject เพื่อสร้าง reactive context กัน

ขั้นตอนแรกเราต้องสร้าง Method ที่คอมโพเนนท์แม่เพื่อให้คอมโพเนนท์ลูกสามารถเรียกใช้ Getter ได้ โดยหน้าตาจะเป็นรูปแบบนี้ดังนี้ 

sennalabs-Frontend-Component3

ทำการเปลี่ยนจาก Assign ที่เป็น Compute ธรรมดาๆ ให้กลายเป็น method ที่ทำการรีเทิร์น Compute ออกไป เพียงเท่านี้เราก็สามารถเรียกใช้ Getter ในคอมโพเนนท์ลูกได้แล้วโดยหน้าตาจะเป็นแบบนี้ครับ  

sennalabs-Frontend-Component

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

เพียงเท่านี้เราก็จะได้ Provide / Inject ที่เป็น reactive สามารถนำใช้ประโยชน์รีแฟคเตอร์การ chain ข้อมูลคอมพอเนนท์ให้สั้นลงและไม่สับสน จริงๆ แล้วยังมีวิธีอื่นอีกที่สามารถทำให้ Provide / Inject ทำงานเป็น reactive เช่น การใช้ plugin/mixin หรือจะเป็นการใช้ vue.observable มาช่วยเป็นต้น  แต่วิธีที่กล่าวมานั้นจะเป็นการดึง plugin อื่นมาช่วยเสริม แต่จริงๆ แล้วเราสามารถใช้ทริคง่าย ๆ ที่กล่าวไว้ในบทความนี้ทำงานได้ดี และสั้นกว่าตัวอื่น ๆ คราวหน้าเราจะไปลุยทริคไหนของ front-end ติดตามที่ https://sennalabs.com/en/blogs ได้เลยครับ

Written By