Pinia (State Management for Vue)

Pinia คือ library สำหรับการจัดการสถานะ (State Management) แบบใหม่ใน Vue.js ที่มาเพื่อแทนที่ Vuex โดย Pinia มีความเรียบง่ายและมีประสิทธิภาพสูง รองรับ Composition API อย่างเต็มรูปแบบ และเหมาะสำหรับการใช้งานในโปรเจกต์ Vue 3

การใช้งาน Vue Pinia

มาเริ่มใช้งาน Pinia ไปพร้อม ๆ กันได้เลย โดยอันดับแรกทำการติดตั้ง Pinia

$ npm install pinia

ทำการสร้าง Store 

// stores/counterStore.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

เรียกใช้ Store ใน Component

<template>
  <button @click="increment">คลิกเพิ่ม</button>
  <p>จำนวนคลิก: {{ count }}</p>
</template>

<script setup>
import { useCounterStore } from '@/stores/counterStore';

const { count, increment } = useCounterStore();
</script>

จากตัวอย่างข้างต้น ทำการสร้าง store ที่ชื่อว่า  counter ด้วย Pinia ที่มี state count และ action increment เพื่อเพิ่มค่า count ใน component โดยเราใช้  useCounterStore เพื่อเข้าถึง state และ actions จาก store ที่ได้สร้างไว้ก่อนหน้า

Pinia เป็นเครื่องมือที่มีประสิทธิภาพสำหรับการพัฒนาแอปพลิเคชันด้วย Vue.js ที่เสริมประสิทธิภาพของ Composition API โดยช่วยให้การจัดการข้อมูลและโค้ดมีความเรียบง่ายและเป็นระเบียบมากขึ้น