mapState กับ mapGetter ต่างกันยังไง

วันนี้คุยกันเบา ๆ เกี่ยวกับ vuex ประเด็นนี้เกิดขึ้นหลังจากที่ช่วยสอน vue ที่ทาง Sellsuki จัดขึ้น ซึ่งในหัวข้อที่ผมต้องสอนก็คือ vuex ผมเลยต้องไปหาดู course ที่สอนเรื่องนี้ ดูไปดูมาก็ได้ไปเจอ course นี้ พอดูจบก็ได้เห็นว่าเอ้ยมันมี mapState ด้วย

mapState คืออะไร?

เอาเป็นว่ามันเป็น helper function ของ vuex ที่เอาไว้ดึง state ที่เราอยากใช้มาแสดงค่าเลย อืมม อธิบายคงลำบากเอาเป็นตัวอย่างละกัน สมมติเรามี user store เก็บค่าเป็น

const state = {
  firstName: '',
  lastName: '',
}

ทีนี้ถ้า component ของเราอยากใช้ firstName หรือ lastName เราก็ใช้ผ่าน mapState ได้เลย

<template>
  <div>{{ firstName }} {{ lastName }}</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  computed: mapState('user', ['firstName', 'lastName])
}
</script>

mapGetter คืออะไร?

ตัวนี้ก็เป็น helper function เหมือนกันแต่จุดประสงค์จะต่างจาก mapState อยู่นิดหน่อย คือ mapGetter จะเป็นการเปลี่ยนแปลง state แล้วเราจะเอาค่านั้นไปใช้ได้เลย มาดูตัวอย่างกัน เช่นจากตัวอย่างข้างบนถ้าเราอยากใช้เป็น fullName เราจะเขียน user store เป็น

const state = {
  firstName: '',
  lastName: '',
}
const getters = {
  fullName: ({ firstName, lastName }) => `${firstName} ${lastName}`
}

ทีนี้พอเราจะเอา fullName ไปใช้ใน component ก็

<template>
  <div>{{ fullName }}</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  computed: mapGetters({ fullName: 'user/fullName' })
}
</script>

ถ้าจะยกตัวอย่างเพิ่มเติมการใช้ getter ก็เช่น

• array operation ต่าง ๆ map, reduce
• concat string
• คำนวณเช่น db ส่งปีเกิดมาแต่เราอยากให้แสดงอายุ

แล้วทำไมเราต้องสนใจสองอันนี้ด้วยหละ

อันนี้เป็นเชิงสารภาพบาป คือผมก็เพิ่งรู้นี้แหละว่ามันมี mapState ด้วยเหมือนอ่านมันผ่าน ๆ ไปเลยตอนที่น้อง ๆ ในทีมสอนเขียนก็ให้ใช้ getter อย่างเดียว จนมาเตรียมเนื้อหาการสอนนี่แหละ หลังจากสอนผมก็หาข้อมูลใน community ก็จะแบ่งเป็นสองฝั่ง ฝั่งแรกคือ mapGetter ทุกอย่างเลยกับอีกฝั่งคือ mapState + mapGetter

สรุปใช้อันไหนดี

จะเห็นได้ว่าเราสามารถใช้ mapGetter ให้กับทุก state ได้ หรือจะใช้เป็น mapState บวกกับ mapGetter ก็ได้ มาดูข้อเสียของการเขียนสองแบบนี้กัน

mapGetter ทุกอย่างเลย

ข้อดี ไม่ต้องเสียเวลาอธิบายความแตกต่างระหว่าง mapState กับ mapGetter

ข้อเสีย เราจะไม่รู้ว่า getter อันไหนที่มันเป็น getter จริง ๆ

mapState + mapGetter

ข้อดี เราจะเห็นที่ component เลยว่าอันไหนคือ state อันไหนคือ getter และเราไม่ต้องเขียน getter กับ state ที่ไม่ได้เป็น getter จริง ๆ

ข้อเสีย คนที่เข้าทีมมาใหม่จะงงความแตกต่าง อาจจะต้องเสียเวลาในการอธิบายหน่อย

คือเอาจริง ๆ มันเป็น context ของแต่ละทีมแหละครับว่าชอบการเขียนแบบไหน ส่วนทีมผมตอนแรกใช้เป็น mapGetter ทุกอย่างเลย แต่หลังจากคุยกับทีมแล้ว หลังจากนี้คงใช้เป็น mapState + mapGetter ครับ

ฝากไว้นิดนึงครับ ก่อนที่เราจะใช้อะไรเราควรจะรู้ก่อนว่ามันมีอะไรให้ใช้บ้าง เราไม่ควรจะใช้สิ่งนั้นเพราะคนในทีมบอกอย่างเดียว เราควรจะรู้เหตุผลที่มาที่ไปของมันด้วยว่าเราใช้มันทำไม อย่าเป็นเหมือนผมเลยกว่าจะรู้ก็กดไปหลาย project ละ 555