Manajemen State di Vue 3 dengan Pinia

Manajemen state yang efektif adalah kunci untuk membangun aplikasi Vue 3 yang dapat dipelihara dan diskalakan. Meskipun Vuex telah lama menjadi standar, Pinia muncul sebagai alternatif modern yang lebih ringan, dengan API yang lebih sederhana, dukungan TypeScript yang kuat, dan kinerja yang baik. Dalam panduan ini, kita akan membahas cara menggunakan Pinia mulai dari instalasi hingga pola penggunaan tingkat lanjut.

1. Apa itu Pinia?

Pinia adalah library manajemen state yang dirancang khusus untuk Vue 3. Dibandingkan dengan Vuex, Pinia menawarkan:

• API yang lebih sederhana dan intuitif.
• Dukungan bawaan untuk Composition API.
• Integrasi TypeScript yang mudah.
• Pengurangan boilerplate kode.

Sebagai pengganti resmi Vuex, Pinia cocok untuk aplikasi kecil maupun besar, membuat manajemen state menjadi lebih bersih dan efisien.

2. Menyiapkan Pinia di Vue 3

Instal Pinia menggunakan npm:

npm install pinia

Kemudian, integrasikan ke proyek Vue 3:

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

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.mount('#app');

Dengan setup ini, Pinia siap digunakan di seluruh aplikasi Anda.

3. Membuat Store Pertama Anda

Di Pinia, store digunakan untuk menyimpan dan mengelola state. Berikut contoh membuat store untuk penghitung (counter):

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

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

• state: Menyimpan data yang reaktif.
• getters: Menghasilkan state turunan.
• actions: Digunakan untuk memodifikasi state, mendukung logika kompleks dan operasi asinkron.

4. Mengakses State di Komponen

Gunakan hook useStore untuk mengakses store dalam komponen:

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <button @click="counter.increment">Increment</button>
  </div>
</template>

<script setup>
import { useCounterStore } from './stores/counter';

const counter = useCounterStore();
</script>

State di store bersifat reaktif, sehingga UI akan otomatis diperbarui saat state berubah.

5. Menggunakan Getter untuk State Turunan

Getter memungkinkan perhitungan state turunan, mirip dengan properti terkomputasi (computed properties):

<template>
  <div>
    <p>Double Count: {{ counter.doubleCount }}</p>
  </div>
</template>

<script setup>
import { useCounterStore } from './stores/counter';

const counter = useCounterStore();
</script>

Getter menjaga logika state tetap bersih dan efisien.

6. Memperbarui State dengan Action

Gunakan action untuk memodifikasi state, termasuk operasi asinkron:

// stores/counter.js
actions: {
  async incrementAfterDelay() {
    setTimeout(() => {
      this.count++;
    }, 1000);
  }
}

Panggil action dari komponen untuk memperbarui state dengan aman.

7. Praktik Terbaik Menggunakan Pinia

• Modularitas: Pisahkan store berdasarkan fitur atau domain.
• Gunakan TypeScript: Untuk keamanan tipe dan pelengkapan otomatis.
• Gunakan store secukupnya: Jangan buat store untuk semua data; simpan yang benar-benar perlu dikelola secara global.

8. Kesimpulan

Pinia menyediakan manajemen state modern, ringan, dan efisien untuk Vue 3. Dengan API yang intuitif, dukungan TypeScript, dan integrasi mudah dengan Composition API, Pinia mempermudah pengembangan aplikasi skala kecil maupun besar. Cobalah Pinia di proyek Anda berikutnya untuk pengalaman manajemen state yang lebih bersih dan terstruktur.