Menggunakan Vue Pinia

Sekarang kita akan belajar cara menggunakan Vue Pinia. Apa sih vue pinia itu? Jadi, selama ini kita dalam sebuah component kita sering sekali menggunakan state, entah itu menggunakan ref atau reactive. Nah, state yang kita buat, biasanya hanya bisa digunakan pada satu component saja. Bagaimana jika kita ingin state yang bisa diakses oleh semua component? Di sinilah Vue Pinia memberikan jawaban. Dengan Vue Pinia kita bisa membuat dan mendefinisikan state secara global sehingga bisa diakses oleh semua component. Yuk, kita coba pelajari.

Memasang Vue Pinia

Vue Pinia ini merupakan library sendiri ya, dia teripisah dari Vue. Meskipun terpisah namun yang mengembangkan Vue Pinia adalah Core Team Vue. Karena terpisah, kita harus memasangnya terlebih dahulu, caranya hampir mirip ketika kita memasang Vue Router, yaitu dengan npm install pinia.

Setelah pemasangan berhasil, kita juga harus membuat objectnya dan menggunakannya pada main.ts. Berikut ini contohnya:

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

const pinia = createPinia();
const app: any = createApp(App);
app.use(pinia);
app.mount('#app');

Pada contoh di atas, kita membuat object pinia dengan fungsi createPinia(). Selanjutnya kita menggunakan pinia dengan app.use(pinia). Nah, setelah itu bagaimana? katanya mau buat global state? mana global statenya? Oke, kita sekarang buat global state ya

Cara membuat Global State dengan Vue Pinia

State dalam pinia dibuat di dalam store. Jadi sebelum membuat global state kita buat dulu storenya. Kita buat dulu directory stores di dalam src. Kemudia kita buat file store, misalnya DataStore dengan isi sebagai berikut

import {defineStore, type StoreDefinition} from "pinia";

export const useDataStore: StoreDefinition = defineStore('dataStore', (): {} => {
    return {}
});

Deklarasi di atas adalah definisi dari store, kita belum membuat state. Perhatikan, untuk membuat store kita menggunakan fungsi defineStore dari pinia. Nantinya, state akan masukkan ke dalam definisi store di atas. Misalkan, sekarang kita ingin menyimpan global state berupa nama aplikasi. Kita bisa memasukkan statenya ke dalam store dengan cara seperti ini:

import {defineStore, type StoreDefinition} from "pinia";
import {type Ref, ref} from "vue";

export const useDataStore: StoreDefinition = defineStore('dataStore', (): {} => {
    const appName: Ref = ref("Nama Aplikasi");

    return {
        appName
    }
});

State ditulis sesuai dengan cara kita membuat state. Ingat, jika bukan object, kita gunakan ref, kalau object kita gunakan reactive. Setelah kita definisikan appName lalu appName tersebut kita return sehingga kita mengaksesnya dari component manapun yang kita inginkan.

Oke, sekarang mari kita coba untuk mengakses state yang sudah kita definisikan. Misalkan kita punya component Home, mari kita akses dari component tersebut dengan cara seperti ini:

<!--Component Home-->
<script setup lang="ts">
import {useDataStore} from "../stores/DataStore.ts";

const dataStore = useDataStore();
</script>

<template>
  <h1>Home</h1>
  {{dataStore.appName}}
</template>

<style scoped></style>

Perhatikan contoh cara mengakses store dan state. Pertama kita harus melakukan import store terlebih dahulu dari lokasi dimana kita menyimpan store. Setelah kita import, kita buat variable dataStore dengan fungsi useDataStore. Jika sudah kita tinggal memanggil nama state yang ada dalam store, yaitu appName dengan menuliskan {{dataStore.appName}}.

Benarkah State dalam Store itu Global?

Mungkin dari teman-teman ada yang kurang yakin kalau state yang dibuat dalam store pinia merupakan state global. Nah, untuk membuktikannya mari kita buat contoh. Jadi kita akan membuat berapa kali jumlah halaman di akses. Kita akan menambahkan state visited ke dalam store dan akan kita update state tersebut ketika component di mount. Pertama kita tambahkan dulu state visited ke dalam store dengan cara seperti ini.

import {defineStore, type StoreDefinition} from "pinia";
import {type Ref, ref} from "vue";

export const useDataStore: StoreDefinition = defineStore('dataStore', (): {
    appName: Ref
    visited: Ref
} => {
    const appName: Ref = ref("Nama Aplikasi");
    const visited: Ref = ref(0);

    return {
        appName,
        visited,
    }
});

Selanjutnya kita akan menampilkan state visited di App.vue dengan cara seperti ini.

<script setup lang="ts">
import {useDataStore} from "./stores/DataStore.ts";
const dataStore = useDataStore();
</script>

<template>
  <div>
    <RouterLink to="/" class="nav">Home</RouterLink>
    <RouterLink to="/about" class="nav">About</RouterLink>
  </div>
  <RouterView/><br>
  <br>
  This application visited {{dataStore.visited}} times.
</template>

<style scoped>
/*style bisa diseuaikan sendiri ya*/
</style>

Pada App.vue kita hanya mengakses dan menampilkan data state di bagian akhir. Kita akan melakukan update setiap kali component Home atau About diakses. Jadi, kita tambahkan script untuk melakukan update state dengan cara seperti ini.

<!--Component Home-->
<script setup lang="ts">
import {useDataStore} from "../stores/DataStore.ts";
import {onMounted} from "vue";

const dataStore = useDataStore();

onMounted(() => {
  dataStore.visited++;
});
</script>

<template>
  <h1>Home</h1>
  {{dataStore.appName}}
</template>

<style scoped></style>

Begitu juga dengan component about, kita tambahkan script yang sama

<!--Component About-->
<script setup lang="ts">
import {useDataStore} from "../stores/DataStore.ts";
import {onMounted} from "vue";

const dataStore = useDataStore();

onMounted(() => {
  dataStore.visited++;
})
</script>

<template>
  <h1>About</h1>
  How about you?
</template>

<style scoped></style>

Dengan begitu, ketika component Home atau About dirender maka state visited akan bertambah 1. Jika memang state visited ini bersifat global, maka state visited yang ditampilkan oleh compoent App.vue akan terus bertambah. Perhatikan hasilnya berikut ini.

Nah, bisa kita perhatikan, kalimat “This application visited x times” bertambah terus, padahal state visited tersebut diupdate dari 2 komponen yang berbeda. Jadi kesimpulannya adalah state yang dibuat di store pinia merupakan global state.

Penutup

Nah, demikianlah cara menggunakan vue pinia untuk manajemen state pada project yang buat dengan Vue JS. Jika masih kurang lengkap, teman-teman dapat mengakses dokumentasi Vue Pinia ya. Selamat belajar, semoga tulisan ini bermanfaat untuk kita semua.