Vue Academy · Pelajaran

Pinia vs Vuex: Alasan Beralih

Tanpa MUTATION, inferensi TypeScript, dukungan DevTools, API yang lebih sederhana, serta modular secara bawaan.

Pinia vs Vuex: Alasan Beralih adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 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 Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Mengapa Pinia Menggantikan Vuex

Pinia adalah pustaka manajemen status resmi untuk Vue 3 dan direkomendasikan daripada Vuex. Pinia mempertahankan bagian baik Vuex, tetapi menghapus kode berulang dan bagian yang menyulitkan TypeScript.

Tidak Ada Lagi Mutasi

Vuex mengharuskan mutations sebagai satu-satunya cara untuk mengubah status. Pinia menghapusnya sepenuhnya — tindakan mengubah status secara langsung. Lebih sedikit formalitas, lebih sedikit berkas, dan pelacakan melalui alat pengembang tetap sama.

// Vuex: state -> mutation -> action (3 steps)
// Pinia: action mutates state directly (1 step)
actions: {
  increment() {
    this.count++ // direct, no commit needed
  }
}

Inferensi TypeScript Langsung Siap Pakai

Di Vuex, memberi tipe pada store terasa menyulitkan dan memerlukan pembungkus yang rumit. Pinia menyimpulkan tipe secara otomatis dari state, getters, dan actions Anda—tanpa lapisan pemberian tipe tambahan.

const store = useCounterStore()
store.count       // inferred as number
store.doubled     // inferred from getter
store.increment() // fully typed action

Modular Sejak Awal

Vuex menggunakan satu store dengan modules bertingkat dan masalah pemberian ruang nama. Pinia secara alami bersifat modular: satu berkas untuk setiap store, yang masing-masing dibuat dengan defineStore sendiri. Tidak perlu pendaftaran terpusat.

// stores/counter.js
export const useCounterStore = defineStore(...)

// stores/user.js
export const useUserStore = defineStore(...)

Tidak Perlu Pemberian Ruang Nama

Karena setiap store berdiri sendiri dan diimpor di tempat penggunaannya, tidak ada ruang nama global yang perlu dikelola. Anda cukup mengimpor store yang diinginkan dan memanggilnya sebagai fungsi.

import { useUserStore } from '@/stores/user'
const user = useUserStore()

Dukungan Vue Devtools

Pinia terintegrasi dengan Vue Devtools seperti halnya Vuex. Anda mendapatkan linimasa tindakan, pemeriksaan status, dan penelusuran kesalahan lintas waktu—tanpa menulis mutasi.

Bundel Lebih Kecil

Pinia berukuran sekitar 1 KB lebih kecil daripada Vuex dan dapat membuang kode yang tidak digunakan. Store yang tidak pernah Anda impor tidak disertakan dalam bundel akhir.

API Lebih Sederhana

Tidak ada kode berulang mapState, mapGetters, atau mapActions. Anda memanggil komposabel store di dalam setup dan langsung menggunakan objek yang dikembalikan.

const counter = useCounterStore()
// access state, getters, and actions on one object

Bekerja dengan Kedua API

Pinia mendukung API Opsi dan API Komposisi. Dua gaya penulisan store tersebut adalah store opsi (objek) dan store penyiapan (fungsi), yang akan dibahas nanti dalam kursus ini.

Memasang Pinia

Tambahkan Pinia ke app dengan membuat instans dan mendaftarkannya sebagai pengaya. Setelah itu, komponen apa pun dapat menggunakan store apa pun.

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

createApp(App).use(createPinia()).mount('#app')

Kapan Menggunakan Pinia

Gunakan Pinia saat status perlu dibagikan ke banyak komponen, tetap ada setelah perubahan rute, atau diperiksa melalui alat pengembang. Untuk status lokal pada satu komponen, ref biasa tetap lebih sederhana.

Pemeriksaan Singkat

Uji pemahaman Anda tentang alasan Pinia menggantikan Vuex.

Ringkasan

Pinia adalah pilihan modern untuk status Vue 3:

Tidak ada mutasi — tindakan mengubah status secara langsung.
Inferensi TypeScript otomatis, tanpa pembungkus.
Modular: satu store per berkas, tanpa pemberian ruang nama.
Dukungan alat pengembang penuh dan bundel sekitar 1 KB lebih kecil.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pinia vs Vuex: Alasan Beralih” gratis?

Ya — teks lengkap “Pinia vs Vuex: Alasan Beralih” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pinia vs Vuex: Alasan Beralih”?

Tanpa MUTATION, inferensi TypeScript, dukungan DevTools, API yang lebih sederhana, serta modular secara bawaan. Kamu berlatih Vue 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 Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue 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 1 dari 4.

Berapa lama pelajaran “Pinia vs Vuex: Alasan Beralih” 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 Vue Academy ini?

Ya. Setiap pelajaran Vue 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

← Kembali ke Vue Academy