State Store ใครบอกเข้าใจง่าย? …ม่ายยยยยย!!! สำหรับเคนนี่เป็นเรื่องที่เข้าใจโคตรยากเลย กว่าจะเข้าใจว่ามันคืออะไร ยังไง ใช้อะไร ทำไมต้องมี ทำไมต้องใช้ dispatch? reducer?
ขออธิบายไม่ใช่ในเชิงวิชาการใดๆ ทั้งสิ้น
แต่เป็นในเชิงของความเข้าใจเคนล้วนๆ นะฮะ ผิดหลักการอันใด สามารถคอมเมนท์เพื่อเสริมความเข้าใจให้เคนได้นะ
Frontend Framework มี State
เป็นเรื่องที่ไม่ค่อยงง และงงในเวลาเดียวกัน สำหรับมือใหม่อย่างเคน ระหว่าง state กับ props ก็ไม่เข้าใจแล้วว่ามันแตกต่างกันอย่างไร
รู้แค่ว่าถ้าเก็บค่าตัวแปรจะใช้ state แต่ถ้าถูกส่งค่าไปที่ Component อื่นจะเรียกมันว่า props
State
เอาจริงๆ สุดท้ายความเข้าใจเคนคือ มันคือที่ไว้เก็บค่าตัวแปรแบบ Global ซึ่งควรจะใช้ร่วมกับพวก State Management ทั้งหลาย เพื่อให้ง่ายต่อการเรียกใช้ และง่ายต่อการบริหารจัดการ
แต่เอาเข้าจริงจะใช้หรือไม่ใช้ตัว State Management ก็ได้ ถ้าแอพเราไม่ได้ลึก และใหญ่มาก
State Management
ตัวบริหารจัดการ State …
เอ๊า งง ดิ งงแบบเคนเหอะ! กว่าเคนจะเข้าใจใช้เวลานานมากเลยนะ
ยกตัวอย่าง State Management ก่อน อย่าง React ก็ Redux และ อย่าง Vue ก็ Vuex
โดยเวลาสร้างพวกนี้เค้าก็จะเรียกกันว่า Store มันคือคลังจัดเก็บ State ส่วนกลางแหละ หน้าที่มันมีแค่…
เอาค่า state ที่เราต้องการเก็บ เอาไปโยนไว้ที่ Store แล้วก็ให้ Component ทั้งเว็บเข้าไปเรียกใช้กันได้
อารมณ์จะเหมือนห้องเก็บของส่วนรวม ใครต้องการให้คนอื่นหยิบใช้อะไรได้ก็เอามาโยนๆ ไว้ในห้องนี้
โยนไว้ที่ Store แล้วยังไงต่อ?
ก็มันแค่สามารถเรียกได้จากทุกๆ Component แค่นั้น…นั่นแหละ! หน้าที่มันมีแค่นั้น
Action Dispatch Reducer อะไรพี่ไม่เข้าใจ!!
ถ้าใครที่ใช้ React/Redux มือใหม่ มึนแบบพี่แน่นอน Reducer คืออะไร Dispatch มันคืออัลไร พี่ไม่เข้าใจโว้ยยยยยย แถมต้องผูกกันผ่าน Action อีก
หลังจากย้ายมาใช้ Vue.js/Nuxt.js เข้าใจขึ้นมานิดหน่อย!
คือการเปลี่ยนแปลงค่าใน State อะ มันไม่สามารถเปลี่ยนโดยตรงได้
มันต้องผ่านฟังก์ชั่นอะไรบางอย่างก่อน
และการจะเรียกใช้ฟังก์ชั่นนั้นก็ต้องเรียกผ่านตัว Action ก่อนอีกต่อนึง
น่านนนนน …งงไปอีกดอก!!!
ไปใช้ Nuxt.js ดีกว่าแฮะ
เคนย้ายจาก React มา Vue ก็ยังไม่ค่อยเข้าใจอยู่ดี แต่พอไปใช้ Nuxt.js อ่ะ ง่ายกว่าใช้ Vue ธรรมดาเยอะเลย เค้าเตรียมอะไรไว้ให้พร้อมสรรพ แถมปรับรูปให้เข้าใจง่ายด้วย
แต่มันก็ต้องใช้ Vue ในการเขียนอยู่ดีเพราะมันเหมือนเป็น Framework ใน Framework ดังนั้น พวกการใช้ v-if v-model ก็ต้องใช้อยู่ดี ดังนั้นก็ต้องเรียนรู้การใช้ Vue เบื้องต้นด้วย
อย่าง store ถ้าเขียนธรรมดาใน Vue จะเขียนเข้าใจยากมาก แต่ Nuxt.js ลดให้เหลือแค่นี้
// file: store/index.js
export const state = () => ({
jwt_token: '',
food: '',
})
export const mutations = {
setFood(state, food) {
state.food = food
},
setJwtToken(state, token) {
state.jwt_token = token
}
}
เอาแบบง่ายๆ ไปก่อน ตอนนี้เหลือแค่ 2 คำละ State กับ Mutations
คืออย่างที่บอกว่า state มันไม่สามารถเปลี่ยนโดยตรงได้ มันต้องผ่านฟังก์ชั่น เพื่อให้ฟังก์ชั่นเป็นตัวจัดการเปลี่ยนค่า state
ใน React จะเรียกว่า Action กับ Dispatch แต่ใน Vue/Nuxt.js จะชื่อว่า Mutations
ก็สร้างฟังก์ชั่นปกติ และจะทำอะไรในฟังก์ชั่นก็ตามใจเราได้เลย
แล้วเวลาที่เราจะเรียกใช้จากในหน้าเพจ Vue/Nuxt ของเราก็จะใช้คำสั่งแบบนี้
// file อะไรสักอย่าง.vue
//เรียกใช้ค่า
this.$store.state.jwt_token
//เรียกใช้ฟังก์ชั่น Mutations เพื่อบันทึกค่าใหม่
let newToken = 'KanexKane.com'
this.$store.commit("setJwtToken", newToken);
ฮู้วววว เข้าใจง่ายกว่ากันเยอะเลย
สรุป
ตอนนี้เรื่อง state เคนพอจะเอาตัวรอดได้ละ ขอบคุณคนทำ Nuxt.js