Dev to webs {Coding…}

เรียนรู้การพัฒนาซอฟเวอร์ เพื่อความรู้ที่ยั่งยืน

บทที่ 13: การจัดการ State ด้วย Vuex (เบื้องต้น)

1. Vuex คืออะไร?

Vuex เป็น State Management Library ที่ออกแบบมาสำหรับ Vue.js โดยเฉพาะ ช่วยให้การจัดการข้อมูล (State) ในแอปพลิเคชันที่ซับซ้อนมีความเป็นระเบียบและสามารถแชร์ข้อมูลระหว่าง Component ได้ง่ายขึ้น

2. แนวคิดหลักของ Vuex

Vuex ใช้แนวคิดแบบ Flux Architecture โดยมีองค์ประกอบหลักดังนี้:

  1. State: เก็บข้อมูลของแอปพลิเคชัน (Centralized State)
  2. Getters: ฟังก์ชันที่ใช้ดึงข้อมูลจาก State และสามารถคำนวณข้อมูลได้
  3. Mutations: ฟังก์ชันที่ใช้เปลี่ยนแปลง State โดยตรง (Synchronous)
  4. Actions: ฟังก์ชันที่ใช้เรียก Mutations และสามารถทำงานแบบ Asynchronous ได้
  5. Modules: ใช้สำหรับแยก State, Getters, Mutations, และ Actions ออกเป็นส่วนย่อย ๆ

3. การติดตั้ง Vuex

ติดตั้ง Vuex ผ่าน npm หรือ yarn

npm install vuex

เพิ่ม Vuex ในโปรเจกต์

import { createApp } from 'vue';
import { createStore } from 'vuex';
import App from './App.vue';

const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

const app = createApp(App);
app.use(store);
app.mount('#app');

4. การใช้งาน Vuex

การอ่าน State

คุณสามารถเข้าถึง State ใน Component ได้โดยใช้ this.$store.state:

<template>
  <div>
    <p>Count: {{ $store.state.count }}</p>
  </div>
</template>

การเปลี่ยนแปลง State ด้วย Mutations

ใช้ commit เพื่อเรียก Mutations:

<template>
  <div>
    <p>Count: {{ $store.state.count }}</p>
    <button @click="$store.commit('increment')">Increment</button>
  </div>
</template>

การใช้ Actions

ใช้ dispatch เพื่อเรียก Actions:

<template>
  <div>
    <p>Count: {{ $store.state.count }}</p>
    <button @click="$store.dispatch('incrementAsync')">Increment After 1 Second</button>
  </div>
</template>

การใช้ Getters

คุณสามารถใช้ Getters เพื่อดึงข้อมูลจาก State:

<template>
  <div>
    <p>Double Count: {{ $store.getters.doubleCount }}</p>
  </div>
</template>

5. การจัดการ State ด้วย Modules

เมื่อแอปพลิเคชันมี State ที่ซับซ้อน คุณสามารถแยก State ออกเป็น Modules เพื่อจัดการได้ง่ายขึ้น

ตัวอย่าง:

const counterModule = {
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
};

const store = createStore({
  modules: {
    counter: counterModule
  }
});

การใช้งานใน Component

<template>
  <div>
    <p>Count: {{ $store.state.counter.count }}</p>
    <button @click="$store.commit('counter/increment')">Increment</button>
  </div>
</template>

6. สรุป

ในบทนี้ คุณได้เรียนรู้:

  • แนวคิดพื้นฐานของ Vuex
  • การติดตั้งและตั้งค่า Vuex
  • การใช้งาน State, Mutations, Actions, และ Getters
  • การจัดการ State ที่ซับซ้อนด้วย Modules

ในบทถัดไป เราจะศึกษาการใช้ Vue Router เพื่อสร้างระบบการนำทางในแอปพลิเคชันของคุณ!