Pinia untuk Vue: defineStore dan storeToRefs
Definisikan store Pinia dengan defineStore, akses dari komponen, dan gunakan storeToRefs agar reaktivitas tetap terjaga saat melakukan destructuring pada state.
Pinia untuk Vue: defineStore dan storeToRefs adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa Itu Pinia?
Pinia adalah pustaka resmi untuk pengelolaan status Vue 3. Pinia menggantikan Vuex dengan API yang lebih sederhana, aman terhadap tipe, terintegrasi dengan DevTools, dan terasa seperti Composition API.
Menginstal Pinia
Instal dan daftarkan plugin Pinia pada app Vue.
npm install pinia
// main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
const app = createApp(App);
app.use(createPinia());
app.mount('#app');defineStore — Gaya Composition API
defineStore membuat penyimpanan. Gaya Composition API menggunakan ref, computed, dan fungsi secara langsung—sama seperti composable.
// stores/counter.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
export const useCounterStore = defineStore('counter', () => {
const count = ref(0);
const doubled = computed(() => count.value * 2);
function increment() { count.value++; }
return { count, doubled, increment };
});defineStore — Gaya Options
Gaya Options mencerminkan Options API Vue: state() untuk data reaktif, getter (seperti computed), dan tindakan (seperti metode).
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
getters: {
doubled: (state) => state.count * 2,
},
actions: {
increment() { this.count++; },
async fetchAndSet(id: string) {
this.count = await fetchCount(id);
}
}
});Menggunakan Penyimpanan dalam Komponen
Panggil hook penyimpanan di dalam setup(). Penyimpanan tersebut adalah objek reaktif—Anda dapat membaca status dan memanggil tindakan secara langsung.
<script setup>
import { useCounterStore } from '@/stores/counter';
const store = useCounterStore();
</script>
<template>
<p>{{ store.count }}</p>
<button @click="store.increment">+</button>
</template>storeToRefs — Destrukturisasi Aman
Destrukturisasi langsung penyimpanan menghilangkan reaktivitas untuk status dan getter (keduanya menjadi nilai biasa). Gunakan storeToRefs() untuk melakukan destrukturisasi secara reaktif.
import { storeToRefs } from 'pinia';
const store = useCounterStore();
// Actions can be destructured normally (they're functions):
const { increment } = store;
// State and getters need storeToRefs:
const { count, doubled } = storeToRefs(store);$patch — Pembaruan Sekaligus
store.$patch() menerapkan beberapa perubahan status sebagai satu operasi. Berguna untuk mengelompokkan pembaruan terkait.
store.$patch({
count: 10,
name: 'Updated'
});
// Or with a function for complex logic:
store.$patch(state => {
state.items.push(newItem);
state.total += newItem.price;
});$subscribe — Mengawasi Perubahan Penyimpanan
store.$subscribe(callback) bereaksi terhadap setiap mutasi penyimpanan, mirip dengan watch Vue tetapi untuk seluruh penyimpanan.
Plugin Pinia
Plugin Pinia memperluas setiap penyimpanan. Penggunaan umum: menyimpan status ke localStorage, menambahkan pencatatan untuk penelusuran, atau menyuntikkan layanan.
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);DevTools Pinia
Pinia terintegrasi dengan Vue DevTools. Anda dapat memeriksa status store, melihat tindakan yang dipanggil, dan berpindah antarrekaman status menggunakan fitur perjalanan waktu.
Beberapa Store
Buat satu store untuk setiap domain (useAuthStore, useCartStore, useNotificationStore). Store dapat mengimpor dan menggunakan satu sama lain. Struktur datar Pinia (tanpa modul bertingkat) membuatnya sederhana.
Pemeriksaan Singkat
Mengapa Anda harus menggunakan storeToRefs() saat melakukan destrukturisasi store Pinia?
Rangkuman: Pinia
defineStore membuat store. Gunakan gaya API Composition atau Options. Akses melalui fungsi pengait useXxxStore(). Gunakan storeToRefs() untuk destrukturisasi reaktif. Gunakan $patch() untuk pembaruan secara berkelompok. Gunakan plugin untuk persistensi dan ekstensi lainnya. Terintegrasi dengan DevTools. Satu store untuk setiap domain — tanpa modul bertingkat ala Vuex.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pinia untuk Vue: defineStore dan storeToRefs” gratis?
Ya — teks lengkap “Pinia untuk Vue: defineStore dan storeToRefs” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Pinia untuk Vue: defineStore dan storeToRefs”?
Definisikan store Pinia dengan defineStore, akses dari komponen, dan gunakan storeToRefs agar reaktivitas tetap terjaga saat melakukan destructuring pada state. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Pinia untuk Vue: defineStore dan storeToRefs” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Redux Toolkit: createSlice dan configureStore
- Zustand untuk State React yang Ringan
- Pinia untuk Vue: defineStore dan storeToRefs
- Kapan Menggunakan State Global atau Lokal