Vuex — Lecture คร่าวๆ (1)
สรุปตามความเข้าใจของตัวเอง จาก Docs ของ Vuex ที่นี่
https://vuex.vuejs.org/
Vuex — “State Management Pattern”
ลองดูโค้ดตัวอย่างแบบง่ายๆ สักอันกันก่อน

จากโค้ดตัวอย่างนี้ Vue App ของเราจะประกอบไปด้วย
- State (data) … ตัวแปร, ข้อมูล ที่เก็บใน App
- View (template) … ส่วนที่นำ data ของเราไปแสดงผล
- Action (methods) … เหตุการณ์, การกระทำที่เกิดขึ้น ให้มีผลในการเปลี่ยนแปลง data
ส่วนประกอบทั้งสามส่วนนี้ของ Vue App เป็น Concept ของ “one-way data flow”

จากภาพประกอบ อธิบาย Concept ของ one-way data flow ได้ว่า
- เริ่มจาก View จะเป็นส่วนแสดงผลของข้อมูลใน State … รวมถึงการรับ Input ต่างๆ จาก User เพื่อให้เกิด Action ในการเปลี่ยนแปลงข้อมูลใน State
- Action เมื่อมีการกระทำอะไรสักอย่างของ User จาก View ก็จะมี method ที่เข้าไปจัดการ เปลี่ยนแปลงค่าของ State ให้
- State เป็น Data ที่มีอยู่ตั้งต้นของ App และสามารถเปลี่ยนแปลงค่าของตัวเองได้ โดยผ่าน methods ต่างๆ ของ Action … และหลังจากมีการเปลี่ยนแปลงแล้ว ก็ส่งข้อมูล ไป Update ที่ View ให้แสดงผลใหม่อีกครั้ง
ที่เล่ามาทั้งหมดนี้ ยังไม่มีอะไรเกี่ยวข้องกับ State Management Pattern เลยนะ Vuex ก็ยังไม่มีบทบาทใดๆ ทั้งสิ้นกับตัวอย่างนี้ … แล้วจะเกริ่นมาเพื่อ !? 555
เพราะโลกความจริงมันโหดร้ายกว่านี้มาก มันไม่ได้สวยๆ ใสๆ ไม่ได้ง่ายๆ แบบตัวอย่างนี้หรอก
เวลาเราทำงานจริง เรามักจะมีการสร้าง Components ไว้ใช้งานภายใน App ของเรามากกว่า 1 ตัวเสมอ แต่เรามักจะมีความต้องการที่จะให้ทุก Component ของเรานั้น Share State ให้ใช้ด้วยกันได้ทั้ง App น่ะสิ หรือไม่ก็จะมีเหตุการณ์แบบที่ว่า ทำ Action อะไรสักอย่างที่ Component นึง แต่ให้ไปเปลี่ยน State ของในอีก Component นึง อะไรประมาณนี้
(ไม่ยกตัวอย่างให้ดูนะ แค่อยากจะบอกว่า ถ้าเราต้องทำอะไรแบบนี้ขึ้นมา ไอ้ตัว Concept one-way data flow เนี่ยมันจะบีบบังคับเรา ให้ต้องทำท่ายาก กว่าจะเขียนโค้ดออกมาให้เป็นอย่างที่ต้องการได้ มันเหนื่อยมากอ่ะ เชื่อเถอะ 555)
State Management Pattern ก็เกิดขึ้นมาเพื่อแก้ปัญหานี้นี่แหละ
หลักการของมันก็คือ เราจะแยก Shared State ออกมาจัดการที่ตัวกลางข้างนอกตัวนึง (ที่เขาเรียกมันว่า Store น่ะ) … ทีนี้ เวลา Component ไหนจะทำ Action อะไร ต้องการจะใช้ State อะไร ก็เข้ามาจัดการที่ Store ร่วมกันตรงกลางนี่แหละ … Concept ของมัน ง่ายนิดเดียวแค่นี้เลย
และ Vuex ก็คือ State Management Pattern ที่ใช้สำหรับ Vue.js App โดยเฉพาะนั่นเอง

จากภาพ เราจะเห็นว่า Vue Components ของเราแต่ละตัว สามารถรับค่าของ State มาจาก Vuex (Store) มา Render แสดงผลได้
และเมื่อ User มีการกระทำอะไรสักอย่างกับ Component ของเรา … ตัว Component นั้น ก็จะมีการ Dispatch Action ไปที่ Vuex (Store)
เมื่อเกิด Action อะไรสักอย่างขึ้นมาภายใน Vuex (Store) ก็จะมีการไปเปลี่ยนแปลงค่าที่ State ให้ และส่งค่ากลับไปให้ Component Render แสดงผลใหม่อีกครั้งนึง
(เพียงแต่ว่า การเปลี่ยนค่าของ State ที่ว่าไปนี่ ไม่ได้ทำโดย Action สั่งให้เปลี่ยนเองตรงๆ … แต่จะทำโดยผ่านการ Commit ไปที่ Mutations แล้ว Mutations ถึงจะเป็นตัวสั่ง Mutate เพื่อเปลี่ยนแปลงค่าใน State ให้)
อนึ่ง ยังไม่ต้องไปสนใจมากนะ กับคำศัพท์ที่พูดไปทั้งหมดข้างบนนี้ (มาเต็มเลย ทั้ง Dispatch, Commit, Mutation ฯลฯ) เดี๋ยวถ้าถึงเวลาที่ต้องใช้มัน จะอธิบายอีกครั้งหนึ่ง ตอนนี้เอาแค่รู้ไว้เป็น Concept ก่อนก็พอ
แล้วก็ บรรทัดข้างบน คงจะเห็นว่า ทำไมเขียนเน้นจัง ไอ้เจ้า Vuex แล้วก็วงเล็บ Store น่ะ … แค่อยากย้ำไว้ เพราะหลังจากนี้ จะเรียกมันสั้นๆ แค่อย่างใดอย่างหนึ่งแล้วหแต่อารมณ์ละ แต่เข้าใจตรงกันละกันนะว่า มันคือสิ่งเดียวกันน่ะแหละ~~
บล็อกนี้เป็นแค่ Overview เล่าแค่ Concept ว่า Vuex คืออะไร … ก็ตามที่ว่าไปข้างบนนี้เลย … และก็ขอตัดจบไว้เพียงเท่านี้ก่อน เดี๋ยวในบล็อกถัดไป จะเข้าเรื่องละ ว่าวิธีการใช้งาน มันเป็นยังไงบ้าง
แต่ก่อนจบ … อยากจะบอกไว้ก่อนสักนิดว่า
“เราไม่จำเป็นต้องใช้ Vuex ในทุกๆ Vue App ของเรานะ”
เพราะถ้าเราไม่ได้ต้องทำ Single Page App ในสเกลใหญ่ๆ (ที่ต้องมีการจัดการ State โน่นนี่นั่นเป็นจำนวนมาก) ไม่ต้องการทำอะไรในระยะยาว ... เราอาจจะมีท่าอื่น ที่ไม่ได้ยาก ไม่ซับซ้อนมากนัก เพื่อจะตอบโจทย์ของเราได้เหมือนกัน
อันนี้ก็ขึ้นอยู่กับโปรเจคของเรานี่แหละ ว่าต้องการ Vuex เข้ามาช่วยจัดการจริงๆ ไหม ต้องถามใจตัวเองดูด้วย :P
เพราะการจะนำ Pattern ต่างๆ มาใช้งาน ไม่ว่าจะเป็น Pattern ใดก็ตาม … โดยปกติแล้ว ก็จะต้องมี รูปแบบให้ยึดติด ให้ทำตามนั้น ไม่สามารถเขียนอะไรก็ได้ตามใจชอบ
มันก็คือสมดุลระหว่าง ระบบ, ความเป็นระเบียบเรียบร้อย กับ ความอิสระ, ยืดหยุ่น, ตามใจชอบ นั่นแหละ … มันขึ้นอยู่กับงานของเรา ว่าต้องการเลือกแนวทางไหนมากกว่ากัน เท่านั้นเองเนาะ
ป.ล. ใน docs ของ Vue.js มีพูดถึงเรื่อง Simple store pattern ด้วยนะ
https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch
ถ้าไม่เลือกใช้ Vuex ก็ยังมีแนวทางนี้อีกทางนึงให้เลือกเช่นกัน (ถ้ามีโอกาสจะมาเขียนอธิบายในภายหลังนะครับ)