บทที่ 20: การจัดการ State ด้วย Vuex ในแอปพลิเคชันที่ซับซ้อน

1. Vuex คืออะไร?

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

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

Vuex ประกอบด้วยส่วนหลักดังนี้:

State: พื้นที่เก็บข้อมูลที่ใช้ร่วมกัน
Getters: ฟังก์ชันที่ใช้ดึงข้อมูลจาก State
Mutations: ฟังก์ชันที่เปลี่ยนแปลงค่าใน State (Synchronous)
Actions: ฟังก์ชันที่ใช้เรียก Mutations (รองรับ Asynchronous)
Modules: ใช้สำหรับแยก State และการจัดการออกเป็นส่วน ๆ เพื่อเพิ่มความยืดหยุ่น

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

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

npm install vuex

4. การตั้งค่า Vuex Store

ตัวอย่างการสร้าง Store:

// store/index.js
import { createStore } from 'vuex';

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

export default store;

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

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

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

5. การใช้งาน Vuex ใน Component

การอ่านค่า State

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

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

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

การใช้ Actions

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

การใช้ Getters

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

6. การจัดการ State ที่ซับซ้อนด้วย Modules

การสร้าง Module:

// store/modules/counter.js
const counterModule = {
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
};

export default counterModule;

การเพิ่ม Module ใน Store:

// store/index.js
import { createStore } from 'vuex';
import counterModule from './modules/counter';

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

export default store;

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

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

7. การใช้ Plugins ร่วมกับ Vuex

Vuex รองรับการเพิ่ม Plugins เพื่อขยายความสามารถ เช่น การบันทึก State ลง LocalStorage หรือการ Debug

ตัวอย่างการสร้าง Plugin:

const myPlugin = store => {
  store.subscribe((mutation, state) => {
    console.log('Mutation:', mutation);
    console.log('State after mutation:', state);
  });
};

export default myPlugin;

การเพิ่ม Plugin ใน Store:

import myPlugin from './plugins/myPlugin';

const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  plugins: [myPlugin]
});

8. สรุป

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

การตั้งค่าและใช้งาน Vuex Store
การจัดการ State, Mutations, Actions, และ Getters
การจัดการ State ที่ซับซ้อนด้วย Modules
การขยายความสามารถของ Vuex ด้วย Plugins

ในบทถัดไป เราจะศึกษาการใช้งาน Vue Test Utils เพื่อทดสอบ Component และ State!