🍍 Integrasi Pinia dengan Vue.js

Pinia adalah state management library resmi untuk Vue 3. Dibanding Vuex, Pinia lebih ringan, mudah digunakan, dan mendukung TypeScript secara native.

---

🤔 Mengapa Pinia?

• API sederhana dan mirip setup()
• TypeScript-ready tanpa konfigurasi tambahan
• Terintegrasi penuh dengan Devtools
• Bisa digunakan di dalam Composition API dan Options API

---

🚀 1. Instalasi Pinia

npm install pinia

Jika menggunakan Vue Router:

npm install vue-router

---

⚙️ 2. Inisialisasi Pinia

a. File: main.ts

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');

---

🧱 3. Membuat Store

a. File: stores/counter.ts

import { defineStore } from 'pinia';

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

'counter' adalah nama unik store — digunakan dalam Devtools dan debugging.

---

🧑‍💻 4. Menggunakan Store dalam Komponen

a. Options API (Vue 3)

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

<script lang="ts">
import { defineComponent } from 'vue';
import { useCounterStore } from '@/stores/counter';

export default defineComponent({
  setup() {
    const counter = useCounterStore();
    return { counter };
  }
});
</script>

---

🔄 5. Reaktivitas Otomatis

Pinia store bersifat reaktif:

• Perubahan langsung terpantau di template

• Bisa digunakan di berbagai komponen tanpa prop drilling

---

🧪 6. Pinia + TypeScript

Semua property dan method sudah memiliki intellisense otomatis.

counter.count       // ✅ typed number
counter.increment() // ✅ typed function
counter.doubleCount // ✅ typed getter

---

📁 7. Struktur Direktori Disarankan

src/
├── stores/
│   └── counter.ts
├── components/
├── App.vue
└── main.ts

---

🧩 8. Modular Store

Buat satu store untuk satu fitur:

• auth.ts → login, token

• cart.ts → keranjang belanja

• product.ts → daftar produk

• settings.ts → preferensi UI

---

🧠 9. Ekstensi & Plugin Pinia

• Persisted State:

npm install pinia-plugin-persistedstate

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
pinia.use(piniaPluginPersistedstate);

• Devtools Support: Pinia langsung tampil di Vue Devtools