Vue Academy · Pelajaran

defineStore: State, Getters, Actions

Store Options vs Store Setup, state sebagai fungsi, getter computed, serta actions asinkron.

defineStore: State, Getters, Actions adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Tiga Pilar Store

Store opsi memiliki tiga bagian: status (data), pengambil (nilai turunan), dan tindakan (metode yang mengubah status). Anda mendefinisikan ketiganya di dalam defineStore.

Mendefinisikan Store

defineStore menerima string pengenal yang unik dan objek opsi. Fungsi ini mengembalikan komposabel yang secara konvensional diberi nama useXxxStore.

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  // state, getters, actions go here
})

Status Berupa Fungsi

Opsi state harus berupa fungsi yang mengembalikan objek. Ini menjamin setiap instans store mendapatkan status baru, seperti data() pada komponen.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Coddy' })
})

Membaca Status

Panggil komposabel store di dalam setup untuk mendapatkan instans, lalu baca properti status secara langsung. Properti tersebut reaktif.

const counter = useCounterStore()
console.log(counter.count) // 0

Pengambil adalah Nilai Terhitung

getters mirip dengan properti computed. Masing-masing menerima state sebagai argumen pertama dan mengembalikan nilai turunan. Nilai tersebut disimpan sementara.

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 2 }),
  getters: {
    doubled: (s) => s.count * 2
  }
})

Menggunakan Pengambil

Akses pengambil seperti properti—tanpa tanda kurung. Pinia menghitungnya ulang hanya ketika dependensinya berubah.

const counter = useCounterStore()
console.log(counter.doubled) // 4

Pengambil yang Merujuk Pengambil Lain

Untuk menggunakan pengambil lain, rujuk this, bukan parameter status. Saat menggunakan this, jangan gunakan fungsi panah.

getters: {
  doubled: (s) => s.count * 2,
  quadrupled() {
    return this.doubled * 2
  }
}

Tindakan Mengubah Status

actions adalah metode. Tindakan tersebut menggunakan this untuk membaca dan mengubah status secara langsung. Tidak ada commit atau dispatch—cukup panggil metodenya.

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

Tindakan Asinkron

Tindakan dapat bersifat async. Inilah tempat untuk melakukan panggilan API—ambil data, lalu tetapkan hasilnya ke status.

actions: {
  async loadUser(id) {
    const res = await fetch('/api/users/' + id)
    this.user = await res.json()
  }
}

Menggunakan Store dalam Komponen

Impor komposabel, panggil di dalam <script setup>, lalu gunakan status, pengambil, dan tindakan dalam templat.

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

<template>
  <p>{{ counter.count }} -> {{ counter.doubled }}</p>
  <button @click="counter.increment()">+</button>
</template>

Memperbarui Beberapa Bidang

Untuk mengubah beberapa bidang status sekaligus, gunakan $patch. Ini mengelompokkan perubahan ke dalam satu entri alat pengembang.

counter.$patch({ count: 10, name: 'New' })

Pemeriksaan Singkat

Uji pengetahuan Anda tentang struktur store opsi.

Ringkasan

Store opsi memiliki tiga bagian:

state: fungsi yang mengembalikan objek data.
getters: nilai turunan yang disimpan sementara, menerima status atau menggunakan ini.
actions: metode yang mengubah status secara langsung melalui ini.

Gunakan store dengan memanggil komposabelnya di dalam penyiapan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “defineStore: State, Getters, Actions” gratis?

Ya — teks lengkap “defineStore: State, Getters, Actions” 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 “defineStore: State, Getters, Actions”?

Store Options vs Store Setup, state sebagai fungsi, getter computed, serta actions asinkron. 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 2 dari 4.

Berapa lama pelajaran “defineStore: State, Getters, Actions” 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