Vue.js untuk Pemula #5: State Management dengan Pinia

Vue.js adalah salah satu kerangka kerja JavaScript paling populer yang digunakan untuk membangun antarmuka pengguna yang interaktif. Salah satu keunggulan Vue.js adalah fleksibilitasnya yang memungkinkan pengembang untuk memilih perpustakaan atau plugin tertentu yang sesuai dengan kebutuhan mereka. Salah satu plugin yang berguna untuk pengelolaan state dalam Vue.js adalah Pinia, dan di artikel ini, kita akan membahas cara menggunakannya dengan Vite untuk pengembangan web yang cepat.

Apa itu Pinia?

Pinia adalah plugin state management untuk Vue.js yang lebih ringan dan mudah digunakan daripada Vuex, plugin state management bawaan Vue.js. Pinia memiliki beberapa fitur yang membuatnya sangat menarik untuk digunakan, termasuk penggunaan TypeScript dan dukungan untuk pemrograman reaktif.

Dengan Pinia, pengembang dapat membuat toko state yang dapat digunakan di seluruh aplikasi, dan dapat melakukan manipulasi state secara mudah dan efisien. Pinia memungkinkan pengembang untuk memperbarui state secara langsung dari komponen Vue, tanpa melalui aksi yang rumit seperti di Vuex.

Menggunakan Pinia dengan Vite

Vite adalah alat pengembangan web yang cepat dan modern yang memungkinkan pengembang untuk membuat aplikasi web dengan kecepatan yang sangat tinggi. Dalam tutorial ini, kita akan menggunakan Vite untuk membuat aplikasi web sederhana dengan Pinia.

Langkah-langkahnya adalah sebagai berikut:

Langkah 1: Buat proyek Vite baru

Pertama, buat proyek Vite baru dengan menjalankan perintah berikut di terminal:

$ npm init vite@latest

Ikuti petunjuk yang muncul di layar untuk menyelesaikan pengaturan proyek Anda.

Langkah 2: Instalasi Pinia

Setelah membuat proyek Vite baru, instal Pinia dengan menjalankan perintah berikut di terminal:

$ npm install pinia

Kemudian, buat instance pinia dan pasang ke Vue sebagai plugin di file main.ts atau main.js (jika menggunakan JavaScript):

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import { createPinia } from 'pinia';

const pinia = createPinia(); // membuat instance Pinia
const app = createApp(App);

app.use(pinia); // memasang instance pinia ke instance Vue
app.mount('#app');

Langkah 3: Membuat Store Pinia

Setelah menginstal Pinia, buat Pinia store baru dengan membuat file counter.ts di direktori src/stores dan tambahkan kode berikut:

// file: src/stores/counter.ts

import { defineStore } from 'pinia'

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

Kode ini membuat Pinia store dengan nama useCounterStore yang memiliki satu state (count) dan dua aksi (increment dan decrement).

Langkah 4: Buat komponen Vue

Setelah membuat Pinia store, tambahkan kode berikut ke file App.vue:

<script setup lang="ts">
import { useCounterStore } from './stores/counter';

const store = useCounterStore();
</script>

<template>
  <div>
    <h3>Pinia Counter</h3>
    <h1>{{ store.count }}</h1>
    <button @click="store.increment">+</button>
    <button @click="store.decrement">-</button>
  </div>
</template>

Kode ini membuat komponen Vue sederhana yang menampilkan state count dari toko Pinia, dan dua tombol yang memanggil aksi increment dan decrement ketika diklik.

 Langkah 5: Menjalankan proyek

Setelah membuat toko Pinia dan komponen Vue, jalankan proyek Anda dengan menjalankan perintah berikut di terminal:

 npm run dev

Anda sekarang dapat membuka proyek Anda di browser dan melihat tampilan aplikasi web sederhana yang menampilkan state count dari store Pinia, serta dua tombol untuk mengubahnya.

Kesimpulan

Pinia adalah plugin state management yang sangat berguna untuk pengembangan aplikasi Vue.js. Dengan Pinia, pengembang dapat membuat toko state yang mudah digunakan dan dikelola, serta melakukan manipulasi state dengan mudah dan efisien. Dalam tutorial ini, kita telah membahas cara mengintegrasikan Pinia dengan Vite untuk membuat aplikasi web sederhana. Dengan mengetahui cara menggunakan Pinia dan Vite, Anda dapat membuat aplikasi web yang cepat dan efisien dengan state management yang baik.
 

Demo Aplikasi

Anda bisa melihat demo aplikasi yang dibuat melalui Stackblitz disini.