[Vue.js + Vuex] What is Vuex

Image placeholder
แวะมาทักทายกันได้

Vuex คืออะไร

            Vuex is a state management pattern + library for Vue.js applications.เป็น Library ตัวหนึ่งที่นำมาใช้ในโปรเจค Vue.js โดยประโยชน์ของมันคือ การนำสร้างเป็น Store เพื่อมาจัดการ Data Flow และ State Data ที่อยู่ใน Component ช่วยจัดการ Code ที่ซ้ำซ้อนและจัด Code ให้เป็นระบบมากขึ้น


ฝากกดโฆษณา Google Ads สัก click  เพื่อเป็นกำลังใจแก่ผู้เขียนด้วยนะครับ

 




จากรูปการทำงานของ Vuex จะเริ่มต้นจากการสร้าง Component ต่างๆ เช่น ข้อความ ปุ่มกด สมมติว่าเรากดปุ่มที่เราสร้างขึ้นมันจะเกิด Event ขึ้นมาจากการที่ @click=”method_name” เพื่อการ Coding อย่างเป็นระบบและการนำ Vuex มาใช้อย่างมีประสิทธิภาพ จะเริ่มจากการ Dispatching ไปยัง Action เพื่อให้เกิด Action บางอย่าง เช่นการดึงข้อมูล หรือ เก็บข้อมูลจาก API แล้วจากนั้นก็ Commit ไปยัง Mutation ซึ่งในขั้นตอนนี้เป็นการเปลี่ยนแปลงข้อมูล เมื่อข้อมูลเปลี่ยนแปลงแล้วก็ส่งข้อมูลที่เปลี่ยนแปลง mutate ไปยังส่งส่วน State แล้ว Render ไปยัง Component

 

ส่วนประกอบของ Vuex ใน Store มีอะไรบ้าง

            เมื่อดูจาก Flow ในภาพด้านบนประกอบในไฟล์ของ Store จะประกอบไปด้วยขั้นตอนต่างๆ ได้แก่

 

State ขั้นตอนนี้เป็นขั้นตอนที่เก็บข้อมูลของ Store สามารถที่จะออกแบบได้ตามที่ต้องการ ไม่ว่าจะเป็น String , Object เป็นต้น

 

Getter ขั้นตอนนี้ใช้ในกรณีที่ต้องการนำข้อมูลมาประมวลผลก่อนถูกเรียกไปใช้งาน ซึ่งในส่วนนี้สามารถกำหนดเป็น method ที่เรียกใช้งานบ่อยๆได้

 

Action ขั้นตอนนี้เป็นการจัดการ Action ต่างๆ เช่น ดึงข้อมูลจากระบบ API หรือการทำ Logic Flow ต่างๆ หรือการเก็บข้อมูลเอาไว้ที่ Database ในขั้นตอนนี้สามารถทำ Async/Await ได้ด้วย แล้วจึง Commit ไปยัง Mutation ต่อไป


Mutation เป็นขั้นตอนในการเปลี่ยนแปลงข้อมูลใน State ที่ได้รับจากการ Commit ที่ได้มาจาก Action

 

โครงสร้างของ Project ที่นำ Vuex มาใช้

 

├── index.html

├── main.js

├── api

│   └── ... # abstractions for making API requests

├── components

│   ├── App.vue

│   └── ...

└── store

    ├── index.js          # where we assemble modules and export the store

    ├── actions.js        # root actions

    ├── mutations.js      # root mutations

    └── modules

        ├── cart.js       # cart module

        └── products.js   # products module


Ref:

 

https://vuex.vuejs.org/guide/structure.html

https://vuex.vuejs.org/#what-is-a-state-management-pattern

 

 

 

 

           

             

แวะมาทักทายกันได้
donate

Categories: Tutorial Tags: #VUEJS , 3610