Pinia (State Management for Vue)

   อัปเดตล่าสุด Feb. 18, 2024

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 โดยช่วยให้การจัดการข้อมูลและโค้ดมีความเรียบง่ายและเป็นระเบียบมากขึ้น



คอร์สเรียนแนะนำ