อัปเดตล่าสุด Feb. 18, 2024
Pinia คือ library สำหรับการจัดการสถานะ (State Management) แบบใหม่ใน Vue.js ที่มาเพื่อแทนที่ Vuex โดย Pinia มีความเรียบง่ายและมีประสิทธิภาพสูง รองรับ Composition API อย่างเต็มรูปแบบ และเหมาะสำหรับการใช้งานในโปรเจกต์ Vue 3
มาเริ่มใช้งาน Pinia ไปพร้อม ๆ กันได้เลย โดยอันดับแรกทำการติดตั้ง Pinia
$ npm install pinia
ทำการสร้าง Store
// stores/counterStore.jsimport { 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 โดยช่วยให้การจัดการข้อมูลและโค้ดมีความเรียบง่ายและเป็นระเบียบมากขึ้น