Mengintegrasikan Pinia untuk Manajemen State Kompleks di Nuxt

Pernah merasa frustrasi saat aplikasi Nuxt mulai tumbuh dan data antar komponen makin sulit dikelola? Variabel bolak-balik, props yang menumpuk, dan komunikasi antar halaman yang makin rumit sering membuat developer kebingungan. Pada titik itulah, manajemen state menjadi kebutuhan penting—bukan lagi pilihan.

Banyak pemula takut menyentuh topik ini karena istilahnya terdengar rumit. Namun, kabar baiknya: dengan Pinia, manajemen state di Nuxt bisa dibuat jauh lebih sederhana, fleksibel, dan mudah dipahami.

Dalam panduan ini, Anda akan belajar langkah demi langkah cara mengintegrasikan Pinia ke dalam Nuxt, membuat store, hingga mengelola state yang kompleks secara efisien. Dengan gaya bahasa ringan dan contoh praktis, Anda tidak akan tersesat.

Apa Itu Pinia dan Mengapa Penting di Nuxt?

Pinia adalah pustaka manajemen state resmi untuk Vue dan Nuxt—pengganti modern dari Vuex. Beberapa kelebihan Pinia antara lain:

• Sederhana & Intuitif – sintaks mudah dipahami pemula.
• Mendukung TypeScript & DevTools
• Reactive Store – bekerja mulus dengan Composition API.

Dengan Pinia, Anda bisa mengelola data aplikasi (state) di satu tempat sehingga tidak perlu mengoper nilai antar komponen secara manual.

Langkah-Langkah Mengintegrasikan Pinia untuk Manajemen State Kompleks di Nuxt

Langkah 1: Install Pinia di Nuxt

Buka terminal pada root project Nuxt Anda, lalu jalankan:

npm install pinia @pinia/nuxt

npm install pinia @pinia/nuxt

Setelah itu, aktifkan modul Pinia di file nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
  ],
})

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
  ],
})

Langkah 2: Membuat Store Pertama (State Global)

Buat folder stores/ lalu file stores/counter.ts:

import { defineStore } from 'pinia'

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

import { defineStore } from 'pinia'

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

Penjelasan Singkat:

• state → Menyimpan data global.
• actions → Tempat untuk fungsi/mutasi data.

Langkah 3: Menggunakan Store di Komponen Nuxt

Buka salah satu halaman, misalnya pages/index.vue:

<script setup>
import { useCounterStore } from '~/stores/counter'
const counter = useCounterStore()
</script>

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

<script setup>
import { useCounterStore } from '~/stores/counter'
const counter = useCounterStore()
</script>

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

Kini, data count bisa digunakan di halaman manapun—tanpa props!

Langkah 4: Menangani State Kompleks (Data API, Auth, dsb.)

Untuk kebutuhan aplikasi nyata seperti login atau data dari API, gunakan async actions:

export const useUserStore = defineStore('user', {
  state: () => ({
    user: null,
  }),
  actions: {
    async fetchUser() {
      const data = await $fetch('/api/user')
      this.user = data
    }
  }
})

export const useUserStore = defineStore('user', {
  state: () => ({
    user: null,
  }),
  actions: {
    async fetchUser() {
      const data = await $fetch('/api/user')
      this.user = data
    }
  }
})

Dengan cara ini, Anda dapat:

• Mengelola autentikasi
• Menyimpan data API
• Menghindari duplikasi permintaan

Dengan mengintegrasikan Pinia, Anda tidak hanya mengatur state—Anda membangun fondasi aplikasi Nuxt yang lebih profesional, terstruktur, dan mudah dikembangkan dalam jangka panjang. Kini Anda memahami cara instalasi, membuat store, hingga mengelola state kompleks secara global.

Ingin melanjutkan ke level berikutnya?
Baca juga: Cara Mengintegrasikan API dengan Pinia untuk Auth dan Data Dinamis